jQuery - 用於循環ajax調用

Question

我需要在一個循環中創建ajax調用，在完成前一個新調用之後。

for (var year = 2000; year <= 2017; year++) 
{ 
    $.ajax(
    { 
     url: 'calendar.php?year=' + year, 
     beforeSend: function() 
     { 
      console.log('Loading year: ' + year); 
     }, 
     success: function(result) 
     { 
      $('#events').append(result); 
     } 
    }); 
} 

但是當我檢查控制檯時，所有的調用是在同一時間進行的。

Answer 1

您可以使用jQuery的Promise API來鏈接請求。 只要根據要求完成了queryYears被稱爲另一時間遞增的year，直到year更大然後maxYear

function queryYears(year, maxYear) { 
    // check if the year is less or equal maxYear 
    if (year <= maxYear) { 
    return $.ajax({ 
     url: 'calendar.php?year=' + year, 
     beforeSend: function() { 
      console.log('Loading year: ' + year); 
     } 
     }) 
     .then(function(result) { 
     $('#events').append(result); 

     //incremenat year by one 
     year++; 

     //only call queryYears if year is less or equal to maxYear 
     if (year <= maxYear) { 
      return queryYears(year, maxYear); 
     } 
     }) 
    } else { 
    // if not return a rejected Promise 
    return Promise.reject(new Error(year + ' is larger then ' + mxYear)) 
    } 
} 



queryYears(2000, 2017) 
.then(function() { 
    console.log('finished') 
}) 
.catch(function(err) { 
    console.log('failed with: ') 
    console.dir(err) 
}); 

Answer 2

一個討厭的方式做到這一點可能是您的$ajax選項async設置爲false，但是，這是不推薦的，它可以備份瀏覽器並給用戶帶來不好的體驗。相反，您可以創建一個承諾數組。這可以幫助How to wait until jQuery ajax request finishes in a loop?