如何运行 for loop using timeinterval ionic 3

Question

starttimer() {


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

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


        console.log("timer");

   }, 3000);
  }

实际输出：

0

1

2

3

计时器

Expected output:

0

after 3 sec

1

after 3 sec

2

after 3 sec

3

根据时间执行循环的每一行

有人对此有想法吗？

Answer 1

您可以使用 async await 来完成：

async function starttimer() {


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

starttimer();

Answer 2

我曾经遇到过类似的问题。

我认为这应该可以解决问题。

starttimer() {


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

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


        console.log("timer");

   }, 3000);
  }

Answer 3

你可以使用Promise，因为你同时调用了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);
    }

}

灵感：async function

Answer 4

我建议使用 async/await 示例寻找答案。它将产生更简单和更易读的代码。

但只是为了向您展示它在没有 async/await 的情况下如何工作：

function startTimer() {
  let i = 0;

  tick();

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

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

startTimer();

诀窍是在 tick 函数之外定义 i 并在 tick 函数内部递增它。

如何运行 for loop using timeinterval ionic 3

how to run for loop using timeinterval ionic 3

javascript

for-loop

typescript

ionic3

如何 运行 for loop using timeinterval ionic 3

how to run for loop using timeinterval ionic 3

javascript

for-loop

typescript

ionic3

如何运行 for loop using timeinterval ionic 3