使用 setTimeout 延迟迭代

Question

我知道JavaScript中没有原生sleep或wait方法。但是，我知道setTimeout方法，并且我正在尝试使用它来延迟循环中的执行。

我试图以三秒的间隔延迟迭代(即 0、1、2(的打印。

function load () {
  for (var i = 0; i < 3; i++) {
      console.log(i);
      setTimeout(function() {console.log('sleeping three seconds')}, 3000);
  }
}

这输出：

0
1
2

三秒钟后

(3) sleeping three seconds 

但是，我尝试在迭代之间暂停三秒钟，以便执行为：

0
sleeping three seconds 
1 
sleeping three seconds 
2
sleeping three seconds

Answer 1

这样做的另一种方法(恕我直言，相当优雅(是递归调用函数。像这样：

function load(i) {
  if (i <= 3) {
    console.log(i);
    console.log("sleeping 3 seconds");
    setTimeout(function() {load(i + 1)}, 3000);
  }
}
load(0);

Answer 2

循环立即完成，它不会等待任何事情，因此您创建的所有超时都将在三秒钟内执行！

如果要增加延迟，请将其乘以迭代器

function load() {
  for (var i = 0; i < 3; i++) {
    setTimeout(function() {
      console.log('sleeping three seconds');
    }, 3000 * (i + 1));
  }
}
load();

Answer 3

您可以在标准浏览器承诺实现中添加延迟函数：

Promise.prototype.delay = Promise.prototype.delay || function (ms) {
    return this.then(function () {
        let args = arguments;
        return new Promise(function (resolve) {
            setTimeout(function () {
                resolve.apply(this, args);
            }, ms);
        });
    });
};

之后，您的函数可能如下所示：

let load = function () {
    let promise = Promise.resolve();
    for (let i = 0; i < 3; i++) {
        promise = promise.delay(3000).then(() => console.log(i) );
    }
};
load();

此实现应该适用于所有主流浏览器(而不是在 IE 11 中(：https://caniuse.com/#search=Promise

Answer 4

有类似 wait 的东西叫做 await ：

function timer(v){
 return new Promise(r=>setTimeout(r,v));
}
async function load () {
 for (var i = 0; i < 3; i++) {
  console.log(i);
  await timer(3000);
  }
}
load();

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

请注意，这是 ES7，所以你需要用 Babel 转译才能在任何地方使用它。

转译