无法让暂停功能与我的 javascript 秒表一起使用答案

【问题标题】：Can't get a pause function to work with my javascript stopwatch无法让暂停功能与我的 javascript 秒表一起使用
【发布时间】：2013-09-15 18:34:37
【问题描述】：

谁能帮帮我。我似乎无法让这个秒表暂停并显示暂停（停止）时间，然后在我再次点击开始时重新激活。

我不知道如何让计时器停止计数。不确定结束计时器函数、为当前时间创建一个新函数还是使用 setInterval 继续从中减去 1 是否是最佳实践？

<script type="text/javascript">
var digit=-1.0;
var min=0;
var time;


function timer(){
        digit++;       

        if(digit>59){
                min++;
                document.getElementById("mins").innerHTML=padTimer(min);
                digit=0;
        }
        document.getElementById("secs").innerHTML=padTimer(digit);  
}

function padTimer(x) {
        if (x<=9) { x = ("0"+x); }
        return x;
}  

function start(){
                time=setInterval(timer, 1000);
                timer();
}

function pause() {
}

function reset(){
            digit=-1.0;
            timerPay=0;              
}

</script>

<a href="#" onclick="start()">Click here to start the timer</a>
<a href="#" onclick="pause()">Click here to pause the timer</a>

<a href="#" onclick="reset()">Click here to reset the timer</a>

<div>
<span id="mins" >00</span>:<span id="secs">00</span><br>
</div>

【问题讨论】：

标签： javascript

【解决方案1】：

使用clearInterval(time) 删除间隔。

http://jsfiddle.net/tQE5p/

【讨论】：

【解决方案2】：

由于时间间隔发生在时间变量中，所以你应该在你的暂停函数中使用clearInterval(time)！

【讨论】：

【解决方案3】：

function pause() { clearInterval(time); }

【讨论】：

【解决方案4】：

毫无疑问，clearInterval 是您的答案，但是您的代码中有一个严重的错误：如果用户多次单击开始按钮会怎样（提示：注册了很多间隔）？

我给你写了一个更合理的constructor function。当用户点击start 时，timerStarted 变为true，反之亦然。此外，由于它是constructor function，因此没有全局变量（Timer 函数本身除外），您可以根据需要创建计时器。每个计时器都应该由 new 保留关键字创建。

function Timer (intervalSeconds) {
    this.__intervalSeconds = intervalSeconds;
    this.reset();
};

Timer.prototype.start = function () {
    if (!this.__timerStarted) {
        var self = this;

        this.__timerEventRegistered = setInterval(function() {
            self.timeElapsed += self.__intervalSeconds;
        }, this.__intervalSeconds);
    }
    this.timerStarted = true;
};

Timer.prototype.pause = function () {
    clearInterval(this.__timerEventRegistered);
    this._timerStarted = false;
}

Timer.prototype.reset = function () {
    this.pause();
    this.timeElapsed = 0;
}

// Timer creation example; the timer will be updated each 1000 milliseconds (= 1 second).
var timer = new Timer(1000);

您可以访问timer.timeElapsed，以便查看时间并进行一些操作。

请注意： 由于 Javascript 是单线程的，因此无法保证计时器可以完美运行。实际上，在某些情况下，它可能与此相去甚远。

【讨论】：