帶有 setTimeout 的 JavaScript Promise 按順序解析

Question

我想按時間順序打印 3 條消息，其中每條消息在上一條消息顯示后n秒后顯示。 需要使用 JavaScript 並使用 Promise 來實現這一點，我編寫了一個名為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指定的函數內解析，我試圖理解為什么序列是亂序的。

Answer 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));

Answer 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) => {});
      });
  });