如何使用时间间隔离子3运行循环

Question

starttimer() {


    for(let i=0;i<=5;i++)
    {

      console.log(i);
      var loopTimeout = setTimeout( () => {


        console.log("timer");

   }, 3000);
  }

实际产出：

1

2

3.

计时

预期产出： 0 3秒后 1 3秒后 2 3秒后 3.

基于定时，它将执行循环的每一行。

有人知道这件事吗？

Answer 1

您可以使用异步等待来完成此操作：

async function starttimer() {


    for(let i=0;i<=5;i++)
    {
      console.log(i);
      await new Promise(r => setTimeout(r, 3000));    
    }
}

starttimer();

Answer 2

您可以使用“承诺”，因为您在同一时间调用了3个超时。

function wait3sec() {
    return new Promise(resolve => { setTimeout(() => resolve("tick"), 3000);});
}

async function startTimer() {
    for (i = 0; i < 3; i++) {
        await wait3sec();
        console.log(i);
    }

}

灵感：异步函数

Answer 3

我建议使用异步/等待示例来回答这些问题。它将产生不那么复杂和更易读的代码。

但是，为了向您展示它如何在不需要异步/等待的情况下工作：

function startTimer() {
  let i = 0;

  tick();

  function tick() {
    console.log(i);

    if (i < 3) {
      i ++;
      setTimeout(tick, 3000);
    }
  }
};

startTimer();

诀窍是在i函数之外定义tick，并在tick函数中增加它。