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，但是，不建议这样做，它可以备份浏览器并为用户提供糟糕的体验。相反，你可以创建一个承诺数组。这有助于How to wait until jQuery ajax request finishes in a loop?

jQuery - 用于循环ajax调用

2 个答案: