Question

我正在一個網站，涉及循環通過一個數組，每個元素使用jQuery ajax調用。這裏是一個簡化版本：

var myArray=new Array("El1","El2","El3","El4"); 
for(var i=0; i<myArray.length; i++){ 
    $.ajax({ 
     url: 'page.php?param='+myArray[i], 
     success: function(data){ 
       //doing stuff with the data 
       //this needs to complete before the loop advances 
     } 
    }); 
} 

我需要每個呼叫完成之前通過循環前進。我試着設置async:false，這使得循環正常工作，但是這阻礙了頁面的其餘部分並導致很多滯後。有什麼方法可以阻止循環前進直到調用完成，但仍能夠異步運行其他腳本？

Answer 1

var idx = 0; 
var urls = ["El1","El2","El3","El4"]; 

var doNextRequest = function() { 
    $.ajax({ 
     url: 'page.php?param=' + urls[idx], 
     success: function(data) { 
      // ... 
      idx++; 
      if (idx < urls.length) { 
       doNextRequest(); 
      } 
     } 
    }); 
} 

doNextRequest(); 

Answer 2

沒有必要爲一個循環，如果你使用的Array.shift：

var myArray = new Array("El1", "El2", "El3", "El4"); 

function doRequest() { 
    if (!myArray.length) return; 
    var current = myArray.shift(); 
    $.ajax({ 
     url: 'page.php?param=' + current, 
     success: function(data) { 
      //doing stuff with the data 
      doRequest(); 
     } 
    }); 
} 

Answer 3

呼叫在以前的成功處理程序的下一個請求。像這樣的東西。 （這可能是一個更優雅的構造）。

var myArray=new Array("El1","El2","El3","El4"); 
var i = 0; 

function callAjax() 
{ 
    $.ajax({ 
     url: 'page.php?param='+myArray[i], 
     success: function(data){ 
      //doing stuff with the data 
      //this needs to complete before the loop advances  

      if (i < myArray.length) 
      { 
       i++; 
       callAjax(); 
      } 
     } 
    }); 
}