Javascript не соответствует правильному рабочему процессу

Question

Итак, в Javascript я просто сделал простой цикл, который должен был вызвать fuction 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 
}); 

Не уверен, что вы используете фреймворк, такой как Угловой или Эмбер, где доступна библиотека обещаний.