Question

如何使setTimeout（）在for循环中工作？像这样的代码

function hello() {
    for (let index = 0; index < 3; index++) {
        setTimeout(function () {
            console.log('What\'s up!')
        }, 3000)
        console.log('Yo')
    }
}

hello()

它记录

Yo
Yo
Yo
What's up!
What's up!
What's up!

如何使其成为日志

Yo
What's up(after 3 sec)
Yo
What's up(after 3 sec)
Yo
What's up(after 3 sec)

感谢您的帮助。

Answer 1

做到这一点的一种方法是：

function hello() {
    for (let index = 1; index <= 3; index++) {
        setTimeout(function () {
            console.log('What\'s up!')
        }, 3000 * index)
        setTimeout(function () {
            console.log('Yo')
        }, 3000 * (index - 1))
    }
}
hello()

我基本上利用了for循环索引来给每个console.log调用一个不同的延迟。请注意，“ Yo”总是比“ Whats up”快3000毫秒。

Answer 2

您需要Promise或recursion进行此类操作。

承诺（没有async/await）

async function hello(index = 0) {
    if (index >= 3) return;
    
    index += 1;

    return new Promise(function(resolve){
    
      setTimeout(function(){
        console.log('What\'s up!');
        resolve();
      }, 3000);
      
      console.log('Yo');
      
    }).then(hello.bind(null, index));
}

hello()

承诺（带有async/await）

async function hello() {
    for (let index = 0; index < 3; index++) {
        await Promise.all([
          new Promise(function(resolve){
            setTimeout(function(){
              console.log('What\'s up!');
              resolve();
            }, 3000);
          }),
          console.log('Yo')
        ]);
    }
}

hello()

递归

function hello(index = 0) {
    if (index >= 3) return;
    
    setTimeout(function(){
      console.log('What\'s up!');
      hello(index);
    }, 3000);
    
    console.log('Yo');
    
    index++;
}

hello()

PS ：上面的代码假定您使用ES2017及更高版本。

Answer 3

即使您将等待时间设为0，

setTimeout（）也不会给您想要的结果。要么将console.log都放在setTimeout（）中，要么删除setTimeout（）。

Answer 4

您需要这样的东西：

const times = 3;
var n = 0;

function logYo(){
  console.log('Yo');
  logWhatsUp();
}

function logWhatsUp(){
  setTimeout(() => {
    console.log('Whats Up');
    n++;
    if(n < times)
      logYo();
  }, 3000);
}

logYo();

Answer 5

您可以仅创建一个使用setTimeout（）执行自身的函数，但必须将全局函数合并为计数器。

let counter = 0;
function hello(n){
    console.log("Yo");
    console.log("What's up?);
    counter++;
    if(counter > n){
        setTimeout(hello, 3000);
    }
}

Answer 6

使用Promises怎么样？

您可以等待setTimeout完成，然后再输出“最新消息！”。像这样：

function hello() {
    for (let index = 0; index < 3; index++) {
        new Promise(function (resolve, reject) {
            setTimeout(function () {
                console.log('Yo');
                resolve();
            }, 3000);
        })
            .then(function () {
                console.log('What\'s up!');
            });
    }
}

hello();

所有3个承诺并行运行，使其在3秒后输出所有内容。如果要每3秒输出另一对日志，请查看其他答案。：）

请确保您签出了caniuse这样的示例，以检查您要支持的浏览器是否支持Promises。

如何使setTimeout（）在for循环中工作？

6 个答案: