javascript - Promise 展平失败 - 为什么？

Question

const simplePromise = i => {
    return new Promise(function(resolve, reject) {
        console.log(i);
        setTimeout(function(){
            resolve();
        }, 2000);
    });
}

var anchor = simplePromise(0);
for (var i=1; i<4; i++) {
    anchor = anchor.then(_ => simplePromise(i));
}

打印:

0
4
4
4
4

代替:

0
1
2
3
4

<强>1。有人可以解释为什么吗？和 2. 告诉我如何实现这一点？

我可以看到第一个 promise 已执行 (i=0)，然后循环运行，然后 i 的值(=4) 被传递给下一个 promise 。这难道不应该通过在 then (_ => simplePromise(i)) 中设置一个函数来解决吗？

Answer 1

这是因为您使用了 var。尝试将 var 更改为 let 并解决您的问题。

更新

在 this article 中更清楚地解释了该问题和 this (scroll to section Difference Details -> Closure in Loop)和 great explanation of let key word

解释

让我们看看这段代码:

for (var i = 0; i < 5; ++i) {
  setTimeout(function () {
    console.log(i); // output '5' 5 times
  }, 100);  
}

在该示例中，每次迭代都会创建 function，并在变量 i 上关闭，它将在未来执行。问题是 var 声明变量 which

...is scoped to the nearest function block and let is scoped to the nearest enclosing block, which can be smaller than a function block.

即所有创建的函数都将创建对相同 变量的闭包。当执行时间到来时 i === 5。并且所有函数都将打印相同的值。

如何让解决这个问题...

let in the loop can re-binds it to each iteration of the loop, making sure to re-assign it the value from the end of the previous loop iteration, so it can be used to avoid issue with closures.