如何使用 timeinterval ionic 3 运行 for 循环答案

【问题标题】：how to run for loop using timeinterval ionic 3如何使用 timeinterval ionic 3 运行 for 循环
【发布时间】：2020-01-06 07:36:27
【问题描述】：

starttimer() {


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

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


        console.log("timer");

   }, 3000);
  }

实际输出：

计时器

预期输出：

0

3 秒后

1

3 秒后

2

3 秒后

3

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

有人知道吗？

【问题讨论】：

您需要将console.log(i); 移动到 setTimeout 回调内部。
@Gavin - 即使在所有出现的情况下都会给出 3 :) 不是 0, 1, 2, 3..
setTimeout 我如何回拨

标签： javascript typescript for-loop ionic3

【解决方案1】：

你可以使用 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

【讨论】：

【解决方案2】：

你可以使用 async await 来做：

async function starttimer() {


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

starttimer();

【讨论】：

异步函数可以等待 Promise 的解析，因此 await new Promise 的位几乎就像其他语言中的睡眠函数。
如果回答了您的问题，请将答案标记为正确。

【解决方案3】：

我建议使用 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 函数内递增它。

【讨论】：

【解决方案4】：

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

我认为这应该可以解决它。

starttimer() {


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

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


        console.log("timer");

   }, 3000);
  }

【讨论】：