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?