按顺序运行 Ajax

Question

只是想知道如何确保 for 循环中的 Ajax 按顺序返回值。例如，我有这样的代码：

for(var i=0; i < list.length; i++) {
  $.ajax({
    url: ...,
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
      ...
      var html = '...';
      $('#some-div').append(html);
    })
}

当我运行它时，结果有时会以正确的顺序运行，但有时却不会。我不知道该怎么办。请有人帮我解决这个问题。谢谢！

Answer 1

它们不会按顺序返回，这是您无法控制的，除非您按顺序排列调用（这会减慢整个过程），但这并不意味着您不能在正确的顺序。

添加一个作用域函数并使用一个临时容器（按顺序）立即附加并在 Ajax 完成后填充：

for(var i=0; i < list.length; i++) {
  function(i){
      var $div = $('<div>');
      $('#some-div').append($div);
      $.ajax({
       url: ...,
       type: 'get',
       dataType: "jsonp",
       success: function(data) {
         ...
         var html = '...';
         $div.append(html);
    })
  }(i);
}

作用域函数立即执行，将i 作为本地i 参数传递（如果需要）。这就是他们所说的 IIFE（立即调用函数表达式）。

或者，然后您可以使用i 的值来确定插入特定结果的顺序。我个人喜欢第一个“占位符”选项。

注意：正如@Rooster 指出的那样，您通常最好进行一次返回多个项目（已经按顺序）的 Ajax 调用。

Answer 2

通常要做到这一点，您必须在第一个请求成功时调用第二个请求，在第二个请求成功时调用第三个......等等......

var urls = ["http://www.google.com", ...];
function callAjax(ajaxReqId){
   $.ajax({
    url: urls[ajaxReqId], //keep your urls in an array, Take the URL from the array with the index received as parameter.
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
      ...
      var html = '...';
      $('#some-div').append(html);

      //On success, we are ready to go to next ajax call.
      ajaxReqId++; //So, we increment the index
      if(ajaxReqId < urls.length) //Ensure that we don't cross the maximum requests we intent to call.
          callAjax(ajaxReqId); //Call the same function we used to call request 1. Just with incremented Id.
    })
}

callAjax(0); //Call the very first ajax request by index.

这应该可以帮助你...

编辑： 请注意：这仍然是异步的，可以按照您的意愿完成工作...在继续下一个请求之前等待先前请求的响应。