JQuery：每个

Question

例如，我们提供了以下代码：

$.each([1, 2, 3], function(key, val) {
  gear(val);
});

function gear(params) {
   var values = {1: 'abc', 2: 'cba', 3: 'acb'};
   query(values[params]);
}

function query(settings) {
   $.ajax({
     ...
     settings
     ...
   })
}

我怎么能等到每次迭代完成并调用一些东西？

Answer 1

您可以使用.reduce()迭代数组，jQuery ajax承诺对函数调用进行排序：

[1, 2, 3].reduce(function(p, item) {
    return p.then(function() {
        return gear(item);
    });
}, $.Deferred().resolve()).then(function() {
    // everything done here
});

function gear(params) {
    var values = {1: 'abc', 2: 'cba', 3: 'acb'};
    return query(values[params]);
}

function query(settings) {
   return $.ajax({
     ...
     settings
     ...
   })
}

这将对ajax调用进行排序，这样下一个调用就不会开始，直到前一个调用完成。

在gear()和query()中，您都会返回$.ajax()已经返回的承诺。

然后，使用.reduce()迭代累积promise的数组。您传入最初解析的承诺，然后数组中的每个项目都会在链的末尾添加.then()。

如果您想同时运行所有Ajax调用，然后在完成所有操作后收到通知，则可以执行以下操作：

$.when.apply($, [1, 2, 3].map(function(item) {
    return gear(item);
})).then(function(r1, r2, r3) {
    // everything done here
    // results are in arguments[0], arguments[1], ... arguments[n]
});

function gear(params) {
    var values = {1: 'abc', 2: 'cba', 3: 'acb'};
    return query(values[params]);
}

function query(settings) {
   return $.ajax({
     ...
     settings
     ...
   })
}

Answer 2

var deferreds = [];
$.each([1, 2, 3], function(key, val) {
  gear(val);
});

function gear(params) {
   var values = {1: 'abc', 2: 'cba', 3: 'acb'};
   query(values[params]);
}

function query(settings) {
   deferreds.push($.ajax({
     ...
     settings
     ...
   }));
}
$.when.apply($, deferreds).done(function(){
  // do something here
});

Answer 3

以下是实现它的一个例子。

＆＃13;

＆＃13;

function iterate(callback) {

  $.each([1, 2, 3], function(key, val) {
    gear(val);
  });
  
  callback();
}

function gear(params) {
  var values = {
    1: 'abc',
    2: 'cba',
    3: 'acb'
  };
  print(values[params]);
}

function print(str) {
  document.write(str + "<br />")
}

function notifyComplete(){
  print("Completed.")
}

iterate(notifyComplete);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;