javascript - 重置计时器错误 - Javascript

Question

我正在尝试创建一个运行两次的一分钟计时器。第一次运行时，计时器会倒计时到 0。然后，计时器会重置为一分钟并再次开始倒计时。为了创建这个计时器，我使用了 Javascript，这是一种我不是特别擅长的编程语言。

当我只使用它一次时，它就起作用了。但是，当我尝试在 for 循环中使用它、创建递归函数，或者甚至通过调用函数两次来连续运行它时，倒计时不是连续的。例如，它会显示 4，然后是 2，然后是 -1，即使倒计时应该是连续的并在 0 结束。

我在 StackExchange 上搜索过类似的问题。我关注了the answer to this question ，但倒计时显示 NaN 而不是正确的数字。我还阅读了其他一些问题，但他们的答案对我没有用。

我的 Javascript 代码是:

            window.onload = function() {
                var seconds = 60;
                function timeout() {
                    setTimeout(function () {
                        seconds--;
                        document.getElementById("time").innerHTML = String(seconds)
                        if (seconds > 0){
                            timeout();
                        }
                    }, 1000);
                }
                timeout()
                seconds = 60;
                timeout()
            };

document.getElementById("time") 引用一个以time 为ID 的空段落。

提前谢谢你。

Answer 1

您的代码同时运行该函数两次。试试这个，设置一个单独的计数器，并在计数达到设定数字后停止计时器:

window.onload = function() {
  var seconds = 60;
  var count = 1;

  function timeout() {
    setTimeout(function() {
      seconds--;
      document.getElementById("time").innerHTML = String(seconds)
      if (seconds > 0) {
        timeout();
      } else {
        seconds = 60;
        count++;
        if (count <= 2) {
          timeout();
        }
      }
    }, 1000);
  }
  timeout();
};

<p id="time"> </p>