Javascript 没有遵循正确的工作流程

Question

所以，在 Javascript 中，我只是做了一个简单的循环，本应调用一个函数 3 次，但它执行了循环内的所有内容 3 次，并且仅在此之后才调用函数 3 次。关于为什么会发生这种情况的任何想法

 function latest_update() {
            for(var i = 1; i <= 3; i++) {
                var id = parseInt(document.getElementById("event_id"+i).innerHTML);
                alert("testing");
                document.getElementById("row_num").innerHTML = "" + i;
                FB.api("/" + id,
                    function (response) {
                        if (response && !response.error) {
                            var j = parseInt(document.getElementById("row_num").innerHTML);
                            alert(j);
                            document.getElementById("event_id"+j).innerHTML = response.name;
                        }
                    });
            }

        }

Answer 1

因为Javascript的单线程事件循环，见： http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/

JS 线程必须先完成其当前执行上下文（在本例中为 for 循环），然后才能为循环完成后排队的异步 FB 函数提供服务。

Answer 2

您需要重构您的代码。我用于 HTTP 请求的一个很棒的设计模式是承诺模式。使用承诺，您可以实现您的代码来触发 HTTP 请求，等待所有结果出现，然后再做其他事情。像这样：

function doFBCall() {
  var promise = new Promise();
  FB.api('/' + id, function(response) {
    // do something
    ... 
    // Now resolve the promise
    promise.resolve(); 
    // Note: you should handle the error cases with promise.reject();
  });
  return promise;
};

var arrayOfPromises = [];
arrayOfPromises.push(doFBCall());
arrayOfPromises.push(doFBCall());
arrayOfPromises.push(doFBCall());

// Wait for all promises to finish
Promise.all(arrayOfPromises).then(function() {
  // All promises succeed
}).catch(function() {
  // One or more promises failed
});

不确定您是否在使用像 Angular 或 Ember 这样的框架，其中的承诺库很容易获得。

Javascript 没有遵循正确的工作流程

Javascript not following correct workflow

javascript

facebook-graph-api

facebook-javascript-sdk