javascript - 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 promise 对函数调用进行排序:

[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() 已经返回的 promise 。

然后，您使用 .reduce() 来迭代累积 Promise 的数组。您传入一个最初已解决的 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
     ...
   })
}