在jQuery中使用foreach语句完成所有ajax请求后调用一个函数

Question

我有一个each语句，并在其中调用ajax将一些信息发送给服务器。

$.each(array, function(k, v) { 
    $.ajax({ 
     ... 
    }); 
}); 

当所有 Ajax请求完成，然后在这里调用一个函数... 如何做到这一点？

我不能再使用async: false标志，因为它已被弃用。

Answer 1

存储由$.ajax在返回数组的承诺，然后用$.when等待他们全部完成：

var promises = []; 
$.each(array, function(k, v) { 
    promises.push($.ajax({ 
     ... 
    })); 
}); 
$.when.apply($, promises).then(function() { 
    // They're all done now 
}); 

或使用$.map：

$.when.apply($, $.map(array, function(k, v) { 
    return $.ajax({ 
     ... 
    }); 
})).then(function() { 
    // They're all done now 
}); 

你想看看在done,then和always，以确定哪个最适合您的方案。

$.when的API为有点破坏设计用于略有不同的用例，这就是为什么我们必须以奇怪的方式调用它。它所做的是接受一系列承诺作为离散的论点，并返回一个新的承诺，当你通过它的所有承诺都被解决时，这个承诺将被解决。例如： -

$.when(promise1, promise2, promise3).then(...); 

但是经常我们有承诺的阵列（如上述）。由于它需要离散参数，因此我们使用Function#apply来调用它，因为Function#apply接受一个数组，然后使用数组中的条目作为离散参数调用该函数。

注意：$.when解决时你给它的承诺得到解决它返回的承诺，或拒绝承诺时你给它拒绝承诺任何。因此，如果其中一个ajax呼叫失败，您将立即得到回拨，即使其他呼叫尚未完成，也可以拨打。

如果你不想那样，那么你必须编写自己的函数，这并不难;有点像这样：

function waitForAll(promises) { 
    var waitingFor = promises.length; 
    var allGood = true; 
    var oneResolved = oneSettled.bind(null, true); 
    var oneRejected = oneSettled.bind(null, false); 
    var d = $.Deferred(); 

    promises.forEach(function(promise) { 
     promise.then(oneResolved, oneRejected); 
    }); 

    return d.promise(); 

    function oneSettled(resolved) { 
     if (!resolved) { 
      allGood = false; 
     } 
     if (--waitingFor === 0) { 
      if (allGood) { 
       d.resolve(); 
      } else { 
       d.reject(); 
      } 
     } 
    } 
} 

只是等待他们所有，然后根据他们是否有任何失败而解决或拒绝。你可以更进一步，解决或拒绝一系列结果。

---

您可以$.when与阵列通过给自己的效用函数有点更方便：

function whenAll(array) { 
    return $.when.apply($, array); 
} 

...然后：

whenAll($.map(array, function(k, v) { 
    return $.ajax({ 
     ... 
    }); 
})).then(function() { 
    // They're all done now 
}); 

你甚至可以添加到$，但当然，jQuery的未来版本可以定义whenAll，所以要特别小心。