javascript - 运行 for 循环并暂停 api 调用

Question

我正在使用 node v10.15.3 并尝试暂停 4 秒 以进行 api 调用。

我尝试了以下方法:

let arr = ["Product 1", "Product 2", "Product 3", "Product 4"]


function callApi() {
  console.log("start - " + new Date().toString());
  for (var i = 0; i <= arr.length; i++) {
    (function(index) {
      setTimeout(async() => {
        // here usually comes the api call
        await console.log(arr[index]);
        await console.log(new Date().toString());
      }, 4000);
    })(i);
  }
  console.log("end - " + new Date().toString());
}

callApi()

从输出中可以看出，首先输出消息 start 和 end，然后运行 ​​for-loop。但是，我想在每个函数运行 4 秒之间等待并获得以下输出:

start - Sun Sep 08 2019 13:28:03
Product 1
Sun Sep 08 2019 13:32:07
Product 2
Sun Sep 08 2019 13:36:07
Product 3
Sun Sep 08 2019 13:40:07
Product 4
Sun Sep 08 2019 13:44:07
end - Sun Sep 08 2019 13:28:03

对我做错的任何建议。

Answer 1

setTimeout(..., 4000) - 在循环的每次迭代中，您使用不同的函数调用 setTimeout，但延迟相同，因此所有四个函数都已安排同时运行，从现在开始 4 秒。

相反，请尝试:setTimeout(..., 4000 * (index + 1))。

或者，由于您已经在使用 await，您可以通过将 setTimeout 包装在 Promise 中来更清楚地编写此代码:

let arr = ["Product 1", "Product 2", "Product 3", "Product 4"]

function sleep(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}

async function callApi() {
  console.log("start - " + new Date().toString());
  for (let i = 0; i <= arr.length; i++) {
    await sleep(4000);
    console.log(arr[i]);
    console.log(new Date().toString());
  }
  console.log("end - " + new Date().toString());
}

callApi()

旁注:await 在与 console.log 一起使用时无效，因为后者不返回 Promise(也许您之前有与网络相关的代码在这里确实使用了 promises 而它只是一个遗留物？)。