JavaScript 中的秒表答案

【问题标题】：Stopwatch in JavaScriptJavaScript 中的秒表
【发布时间】：2015-08-22 11:48:48
【问题描述】：

在标记问题重复之前，我想告诉你，我已经完成了所有秒表和 JavaScript 搜索，但由于我是 JavaScript 新手，所以我自己无法找到可能的解决方案，我需要你的帮助伙计们。

我想要实现的是用同一个按钮启动和停止手表。我可以停止手表但不能重新开始，不知道为什么。

看看下面的脚本并纠正我。

var startTimer = setInterval(function(){myTimer()}, 1000);

function myTimer(){
  var current = new Date();
  document.getElementById("timer").innerHTML = current.toLocaleTimeString();
}

function start(st){
  // Problem is in this statement
  // How can I call the global function variable again that's startTimer
  window[st]();
  var elem = document.getElementById("myButton");
  elem.innerHTML = "Stop";
  elem.addEventListener("click", stop);
}

function stop(){
  clearInterval(startTimer);
  var elem = document.getElementById("myButton");
  elem.innerHTML = "Start";
  elem.addEventListener("click", start(startTimer));
}

<p id="timer"></p>
<button id="myButton" onclick="stop(startTimer)">Stop</button>

【问题讨论】：

你在按钮标签调用的函数中作为参数传递了什么？
我已将一个全局变量传递给从按钮标签@Newinjava 调用的函数“stop”

标签： javascript html stopwatch

【解决方案1】：

您需要一个方法来处理启动/停止：

  var startTimer = setInterval(myTimer, 1000),
        timerElement = document.getElementById("timer"),
        buttonElement = document.getElementById("myButton");
    
    function myTimer(){
        var current = new Date();
        timerElement.innerHTML = current.toLocaleTimeString();
    }
    
    function toggle(){
        if (startTimer) {
            clearInterval(startTimer);
            startTimer = null;
            buttonElement.innerHTML = "Start";
        } else {
            buttonElement.innerHTML = "Stop";
            startTimer = setInterval(myTimer, 1000);
        }
    }

   <p id="timer"></p>
    <button id="myButton" onclick="toggle()">Stop</button>

【讨论】：

始终缓存您计划调用的元素，特别是在区间函数内
@RokoC.Buljan 是的，没错。我试图使答案中的代码尽可能接近问题中的示例代码，因此我没有更改 myTimer 方法或其实现。
@KonstantinDiev 是的，我明白了；但你必须同意 Q 码通常需要关注和指导，如果我们可以教...为什么不教 ;)

【解决方案2】：

为什么要清除间隔？ 追赶间隔离开的地方。

var timer  = document.getElementById("timer"),
    paused = 0;

setInterval(function(){
  if(!paused) timer.innerHTML =  new Date().toLocaleTimeString();
}, 1000);

document.getElementById("myButton").addEventListener("click", function(){
  this.innerHTML = (paused ^= 1) ? "Start" : "Stop";
});

<p id="timer"></p>
<button id="myButton">Stop</button>

P.S：总是缓存您计划重用的元素，特别是在区间 fn 内。

(paused ^= 1) 用于切换 1 和 0，1,0,1,0,1... 用作 boolean。

【讨论】：