重置计时器错误 - Javascript答案

【问题标题】：Resetting Timer Errors - Javascript重置计时器错误 - Javascript
【发布时间】：2018-08-21 05:36:39
【问题描述】：

我正在尝试创建一个运行两次的一分钟计时器。在第一次运行期间，计时器将倒计时至 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 的空段落。

提前谢谢你。

【问题讨论】：

标签： javascript loops settimeout nan

【解决方案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();
};

&lt;p id="time"&gt; &lt;/p&gt;

【讨论】：