时间戳

首页 > 解决方案 > While 循环有 1 秒的中断

javascript - While 循环有 1 秒的中断

问题描述

我正在运行一个while循环，它在一个控制台行中一个接一个地打印循环的迭代次数。

<script>

var i = 0;

  while (i < 10) {
    console.log("The number is " + i);
    i++;
  }

</script>

但是，我想在每个console.log输出之间引入 1 秒的暂停。我在互联网和 stackoverflow 上搜索了解决方案并遇到了setTimeout().

<script>

var i = 0;

  while (i < 10) {
    setTimeout(function (){console.log("The number is " + i)}, 1000);
    i++;
  }
</script>

但是，当我setTimeout()在我的代码中引入时，不是将每个数字以 1 秒的间隔打印到单独的控制台行中，而是在一秒钟后打印数字 10。

标签： javascriptwhile-loopsettimeout

解决方案

不是将每个数字之间有 1 秒的暂停打印到单独的控制台行中，而是在一秒钟后打印数字 10。

那是因为你正在分享i，而不是等待你的setTimeout

您可以使用在块内定义块let级变量while

var i = 0
while(i < 10) {
  let scopeVariable = i
  setTimeout(() => console.log(scopeVariable), i * 1000)
  i++
}

您可以通过多种方式实现相同的目标

  • 使用for循环 

    for(let i = 0; i < 10; i++) {
  setTimeout(() => console.log(i), i * 1000)
}

    • 使用递归函数

function increaseNumber(start, end, cur = start, interval = 1000) {
  if (cur === end) return
  console.log(cur)
  setTimeout(() => increaseNumber(start, end, cur + 1, interval), 1000)
}

increaseNumber(0, 10)

  • 使用setInterval

var i = 0
var handler = setInterval(() => {
  if (i === 10) {
    clearInterval(handler)
    return
  }
  console.log(i)
  i++
}, 1000)

推荐阅读