Question

我已经开始学习JavaScript了，我想过尝试一个简单的倒计时器，但我想不出来。

function countdown() {
  var count1 = 10;
  while (count1 >= 0) {
    setTimeout(function() {
      document.getElementById("main").innerHTML = count1;
    }, 1000);
    count1--;
  }
}

<p id="main" onload="countdown()"></p>

页面停止/挂起。这有什么问题？

Answer 1

对定时器使用setInterval，然后在倒计时到达0时清除它。确保使用立即调用的匿名函数或在定义时立即执行命名函数。你的功能不会执行，所以没有计时器。

function countdown() {
  var count1 = 10;
  var myTimer = setInterval(function() {
    document.getElementById("main").innerHTML = count1;
    count1--;
    if (count1 == 0) {
      clearInterval(myTimer);
    }
  }, 1000);
}
countdown();

<div id="main"></div>

Answer 2

你应该使用setInterval，因此它被称为常规，倒计时（减少计数器）应该在setInterval调用的函数内发生。您可以省略循环，只需在计数器达到0时调用clearInterval。

Answer 3

setTimeout只执行一次该功能。使用setInterval可以提供帮助。

但需要注意的另一点是关于变量的范围。当setTimeOut等待1秒时，while循环将继续执行，更改count1的值。

count1的值始终为-1。使用立即调用的函数表达式（IIFE）是必要的。

function countdown()
{
    var count1 = 10;
    while( count1 >= 0) {
      var myTimer = setInterval((function() {
        console.log(count1);
      }(count1)), 1000);
      count1 = count1 - 1;
    }
}
countdown()

Jsfiddle

在javascript中打印setTimeout

3 个答案: