Promise.all 早于预期解决

Question

我正在使用 Promises 编写我的第一段代码，并且得到了一些意想不到的结果。我有一些看起来像这样的代码（使用 jQuery）：

$('.loading-spinner').show();
$('.elements').replaceWith(function() {
   // Blocking code to generate and return a replacement element
});
$('.newElements').blockingFunction();
$('.loading-spinner').hide();

为防止页面在运行此代码时被阻塞，我尝试使用 setTimeout 和 Promises 使其异步，如下所示：

$('.loading-spinner').show();
var promises = [];
var promises2 = [];
$('.elements').each(function(i, el){
    promises[i] = new Promise(function(resolve, reject) {
        setTimeout(function() {
            $(el).replaceWith(function() {
                // Code to generate and return a replacement element
            });
            resolve(true);
        }, 100);
    });
});
Promise.all(promises).then(function(values) {
    $('.newElements').each(function(i, el) {
        promises2[i] = new Promise(function(resolve, reject) {
            setTimeout(function() {
                $(el).blockingFunction();
                resolve(true);
            }, 100);
        });
    });
});
Promise.all(promises2).then(function(values) {
    $('.loading-spinner').hide();
});

我想要实现的是，一旦promises 中的承诺得到解决，promises2 中的承诺就会被实例化。解决这些问题后，加载微调器将被隐藏。

我得到的效果是，虽然页面没有被阻塞很长时间，但一旦设置了所有 Promise，微调器就会消失，而不是等到它们被解决。

我可以看到promises2 Promises 直到promises 中的所有内容都解决后才会解决，所以我不明白为什么会这样。我想这是因为我没有正确理解 Promises，或者没有低估使代码异步的原因。

Answer 1

您在填充它之前在promises2 上调用Promise.all，实际上，当您调用它时，它包含一个空数组，因此它在一个空数组上调用Promise.all，因此它会立即解析而无需等待承诺在promises。

---

快速修复：

function delay(ms){ // quick promisified delay function
    return new Promise(function(r){ setTimeout(r,ms);});
}

var promises = $('.elements').map(function(i, el){
    return delay(100).then(function(){
        $(el).replaceWith(function() {
            // Code to generate and return a replacement element
        });
});
Promises.all(promises).then(function(els){
    var ps = $('.newElements').map(function(i, el) {
        return delay(100).then(function(){ 
            $(el).blockingFunction();
        });
    });
    return Promise.all(ps);
}).then(function(){
    $('.loading-spinner').hide();
});

我们可以做得更好，没有理由为n 元素触发n 超时：

delay(100).then(function(){
    $(".elements").each(function(i,el){ 
        $(el).replaceWith(function(){ /* code to generate element */});
    });
}).
then(function(){ return delay(100); }).
then(function(){
    $('.newElements').each(function(i, el) { $(el).blockingFunction(); });
}).then(function(){
    $('.loading-spinner').hide();
}).catch(function(err){
   throw err;
});