Question

我在delay方法

中使用Promise.then函数生成器

function delay(msec) {
    return (value) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(value);
            }, msec);
        });
    }
}

当我在没有循环的情况下使用delay函数时，它可以正常工作：

var promise = Promise.resolve();
promise
    .then(() => console.log(1))
    .then(delay(1000))
    .then(() => console.log(2))
    .then(delay(1000))
    .then(() => console.log(3))
    .then(delay(1000));

但是当我在循环中使用它时，所有数字都会毫不拖延地打印出来：

var loopPromise = Promise.resolve();
for (let i = 1; i <= 3; i++) {
    loopPromise
        .then(() => console.log(i))
        .then(delay(1000));
}

为什么promises在循环中的工作方式不同？我如何解决这种循环行为？

Answer 1

为什么promises在循环中的工作方式不同？

如果我们展开循环版本，您就是这样做的：

var loopPromise = Promise.resolve();

loopPromise
    .then(() => console.log(1))
    .then(delay(1000));

loopPromise
    .then(() => console.log(2))
    .then(delay(1000));

loopPromise
    .then(() => console.log(3))
    .then(delay(1000));

IE中的每一个调用都直接进入loopPromise并立即被调用，而不是被链接。

我如何解决这种循环行为？

最简单的方法是通过覆盖原始Promise变量来跟踪每次迭代中链的最新部分：

var loopPromise = Promise.resolve();
for (let i = 1; i <= 3; i++) {
    loopPromise = loopPromise
        .then(() => console.log(i))
        .then(delay(1000));
}

为什么promises在循环中的工作方式不同

1 个答案: