带有 setTimeout 的 JavaScript Promise 按顺序解析答案

【问题标题】：JavaScript Promises with setTimeout resolve in sequence带有 setTimeout 的 JavaScript Promise 按顺序解析
【发布时间】：2020-03-16 14:11:49
【问题描述】：

我想按时间顺序打印 3 条消息，其中每条消息在显示上一条消息后的 n 秒后显示。需要使用 JavaScript 并使用 Promises 来实现这一点，我编写了一个名为 printLater 的函数，它返回一个利用 setTimeout 实现阻塞/等待机制的 Promise，如下所示：

let printLater = (message, delay) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(message);
            resolve();
        }, delay);        
    })
}

然后，我尝试使用 3 个 promise 来按顺序打印消息并使用延迟。

printLater('first message, after 2 seconds from start of program', 2_000)
    .then(printLater('second message, after 5 seconds after first message is displayed', 5_000))
    .then(printLater('third message, after 1 second after second message is displayed', 1_000));

需要的输出是：

first message, after 2 seconds from start of program
second message, after 5 seconds after first message is displayed
third message, after 1 second after second message is displayed

但实际输出是：

third message, after 1 second after second message is displayed
first message, after 2 seconds from start of program
second message, after 5 seconds after first message is displayed

考虑到我正在为setTimeout 指定的函数内解析，我试图了解为什么序列出现故障。

【问题讨论】：

.then 需要一个函数，而不是调用函数的结果 - 此代码中最简单的修复....then(() => printLater( ........)) ...即printLater('message', 1000) 立即调用该函数() => printLater('message', 1000) 创建一个前一个 promise 解决时调用的函数
在承诺链中执行此操作是一个常见错误，但我找不到重复项！

标签： javascript promise

【解决方案1】：

您可以创建另一个函数来返回 printLater() 的包装器：

const printLaterCallback = (message, delay) =>
    () => printLater(message, delay);

然后你可以在.then() 调用中使用它：

printLater('first message, after 2 seconds from start of program', 2_000)
    .then(printLaterCallback('second message, after 5 seconds after first message is displayed', 5_000))
    .then(printLaterCallback('third message, after 1 second after second message is displayed', 1_000));

【讨论】：

【解决方案2】：

您好，Promise 链接不正确

const printLater = (message, delay) => new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(`*** ${message} ***`);
    resolve();
  }, delay);
});

printLater('first message, after 2 seconds from start of program', 2000)
  .then((data) => {
    printLater('second message, after 5 seconds after first message is displayed', 5000)
      .then((data) => {
        printLater('third message, after 1 second after second message is displayed', 1000).then((data) => {});
      });
  });

【讨论】：