Question

我无法解决这个问题，而且我发现了许多类似的例子，但似乎没有任何效果或适用于我的情况。

我的代码如下

$.each(versions, function(key,value) {
    progressText.html("Downloading Version " + value);
    ajaxUpdate('download',value).then(console.log(value));
});

function ajaxUpdate(step,value) {
    return $.ajax({
        url: 'action/' + step + '.update/',
        data: 'version=' + value
    })
}

基本上我的问题是它同时执行each，我希望它每个完成一个，然后进入下一个。

我该怎么做？

Answer 1

您可以使用deffer.then(...)对象逐个发出ajax请求。如果要在完成所有请求后调用某个函数，请在each循环后使用function ajaxUpdate(step,value) { return $.ajax({ url: 'action/' + step + '.update/', data: 'version=' + value }) } // Emulate resolved deferred to be able to chain to it in each loop var defer = $.Deferred().resolve(); $.each(versions, function(key, value) { // Add next deferred to chain, it will be invoked when previous is completed defer = defer.then(function(){ return ajaxUpdate('download', value) }); }); defer.then(function(){ console.log('All requests completed') })：

var $log = $('#log');

function ajaxUpdate(url, step) {
  return $.Deferred(function() {

    setTimeout(function() {
      $log.append('<p>finished:' + step + '</p>')
      this.resolve();
    }.bind(this), Math.random() * 1000)

  })
}

var defer = $.Deferred().resolve();
var versions = [1, 2, 3, 4, 5];

$.each(versions, function(key, value) {
  defer = defer.then(function() {
    return ajaxUpdate('download', value)
  });
});

defer.then(function() {
  $log.append('<p>All Done</p>')
});

超时示例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

{{1}}

Answer 2

我遇到了类似的问题，JQuery - Looping a .load() inside a 'for' statement以及适用于我的解决方案，我觉得可以为你效果，因为如果我读得正确，你希望它一次只做一个，是使用递归函数。

它现在无法正常工作的原因是因为Ajax执行异步请求，因此您的代码会立即执行，因为您的浏览器在继续之前不必等待请求完成到下一个。你要做的就是迫使它等待它完成它，然后继续它的下一个任务。如前所述，您使用递归函数执行此操作。基本上，只有当你的请求最终完成时，你才会创建一个自我调用的函数。

当然我使用了一个简单的For语句，而不是一个.each循环。经过一段时间的浏览后，我发现了一个想要在.each循环上使用递归函数的例子：jQuery recursive iteration over objects

所以你的代码应该是这样的：

 $.each(versions, function(key,value) { recursiveFunction(key, val) });

function recursiveFunction(key, val) {
    progressText.html("Downloading Version " + value);
    function ajaxUpdate(key,val) {
    $.ajax({
      url: 'action/' + step + '.update/',
      data: 'version=' + value
      }).done(function(data) {
            console.log(value);
            recursiveFunction(key, val);
        });
      }

}

代码可能需要一些清理，因为我不能在生活中习惯堆栈溢出代码编辑器，我可能还需要更多代码来了解你的内容。重新尝试做和怎么做，但实质上它应该是这样的。它应该有用，如果你稍微调整一下c：同时阅读我在这里包含的链接，它们应该可以帮助你理解我在这里要传达的内容。

当Defered Ajax Requests完成时，Jquery每个循环一个接一个地

2 个答案:

超时示例