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递增 1，直到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，但是，不建议这样做，它可以备份浏览器并给用户带来糟糕的体验。相反，您可以创建一系列承诺。这可能有助于如何等到 jQuery ajax 请求在循环中完成？