JavaScript如何确定AJAX调用何时在循环中完成

Question

过去几天我一直在尝试解决这个问题，并阅读了 StackOverflow 和其他网站上的各种解决方案。

我正在构建一个站点，该站点从外部来源获取 XML 数据，然后根据结果获取更多 XML 以构建网络图。 问题是我必须等到这个 AJAX 调用循环（可能会循环到更多 AJAX 调用）完成后再进行绘制。

我不知道这是否有特别高的认知负担，但它真的让我难过。

我的代码：

function cont(outerNodes) {

    for (var i = 0; i < outerNodes.length; i++) {
        var node = outerNodes.pop();
        getXML(node["label"], node["id"]);
    } 
    // I want the code to wait until loop is done, and then draw.
    draw(nodes, edges);
}

function getXML(term, fromId) {

    var url = someURL;
    $.ajax({
        url: url,
        dataType: "xml",
        success: function(result) {
            var outerNodes = process(result, fromId, term);
            cont(outerNodes);
        }
    });

}

注意：我知道我在这里可能完全误解了 JavaScript 同步性，我很可能是。我过去曾成功使用过回调和承诺，但我似乎无法理解这一点。

如果我还没有完全清楚，请告诉我。

我确实尝试过实现一个在 process() 函数中递增的计数器，如下所示：

if (processCount < 15) {
    for (var i = 0; i < outerNodes.length; i++) {
        var node = outerNodes.pop();
        getXML(node["label"], node["id"]);
    }
} else {
    draw(nodes, edges);
}

但是，这最终导致了几次 draw() 调用，这让我的表现非常糟糕。

Answer 1

布拉德的回答将代码更改为同步，对我来说这违背了目的。如果您一直在等待所有请求完成，则可能需要一段时间，而普通浏览器可以处理多个请求。

您在原始问题中遇到的问题与范围有关。由于对cont(outerNodes) 的每次调用都会触发它自己的作用域，因此它不知道调用在做什么。所以基本上如果你调用cont(outerNodes) 两次，每个调用都会处理它自己的outernodes 列表，然后调用draw。 解决方案是在不同范围之间共享信息，这可以通过一个，但最好是两个全局变量来完成：1 用于跟踪活动进程，1 用于跟踪错误。

var inProcess = 0;
var nrErrors = 0;

function cont(outerNodes) {

    //make sure you have outerNodes before you call outerNodes.length
    if (outerNodes) {
      for (var i = 0; i < outerNodes.length; i++) {
          var node = outerNodes.pop();
          inProcess++; //add one more in process
          getXML(node["label"], node["id"]);
      } 
    }

    //only trigger when nothing is in proces. 
    if (inProcess==0) {
      // I want the code to wait until loop is done, and then draw.
      draw(nodes, edges);
   }
}

function getXML(term, fromId) {

    var url = someURL;
    $.ajax({
        url: url,
        dataType: "xml",
        success: function(result) {
            var outerNodes = process(result, fromId, term);
            inProcess--; //one is done
            cont(outerNodes);
        },
        error: function() {
            inProcess--; //one is done
            nrErrors++; //one more error
            cont(null); //run without new outerNodes, to trigger a possible draw
        }
    });

}

请注意，我跟踪nrErrors，但不对其进行任何操作。您可以使用它来停止进一步的处理，或者警告用户绘制未完成。

[重要] 请记住，这在javascript 中有效，因为它充其量只是模仿多线程。这意味着对inProcess--; 和cont(outerNodes); 之后的调用总是直接在彼此之后执行。

如果您将其移植到真正的多线程环境中，很可能cont(null); 的另一个作用域/版本会插在两条线之间，仍然会有多次绘制。

Answer 2

我们可以使用一些很好的新 API 和语言结构，这些 API 和语言结构得到很好的支持。 Fetch API、await 和 for...of loops。

Fetch API 使用 Promises。可以等待承诺。 for...of 循环知道await 并且在await 过去之前不会继续循环。

// Loop through, one-at-a-time
for (const node of outerNodes) {
  // Make the HTTP request
  const res = await fetch(someUrl);
  
  // Do something with the response here...
}

不要忘记try/catch（也适用于await），并检查res.ok。

Answer 3

解决这个问题的最佳方法应该是使用承诺或回调。 如果你真的想避免承诺或回调（虽然我不知道为什么......） 你可以试试计数器。

    let processCount = 0;
    
    // Increasing the processCount in getXML callback method
    function getXML(term, fromId) {
        var url = someURL;
        $.ajax({
            url: url,
            dataType: "xml",
            success: function(result) {
                processCount++;
                var outerNodes = process(result, fromId, term);
                cont(outerNodes);
            }
        });

    }

    for (var i = 0; i < outerNodes.length; i++) {
        var node = outerNodes.pop();
        getXML(node["label"], node["id"]);
    }
    while (processCount < outerNodes.length) {
        // do nothing, just wait'
    } 

    draw(nodes, edges);

Answer 4

如果经过多次测试，你知道它永远不会超过 5 秒...你可以使用 setTimeout。

function cont(outerNodes) {

        for (var i = 0; i < outerNodes.length; i++) {
            var node = outerNodes.pop();
            getXML(node["label"], node["id"]);
    } 


// Display a 5 second progress bar here

 setTimeout(function(){ draw(nodes, edges); },5000); 

}