Question

我正在运行一个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。

Answer 1

而不是在每个间隔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)

暂停1秒的While循环

1 个答案: