While 循环，间隔 1 秒

Question

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

<script>

var i = 0;

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

</script>

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

<script>

var i = 0;

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

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

Answer 1

instead of printing each number with a pause of 1 second inbetween into a seperate console line, after one second the number 10 is printed.

那是因为您正在分享 i 而不会等待您的 setTimeout

您可以使用 let 在 while 块中定义 block-level 变量

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)

While 循环，间隔 1 秒

While loop with 1second breaks

javascript

while-loop

settimeout