如何恢复计时器？答案

【问题标题】：How to resume a timer?如何恢复计时器？
【发布时间】：2015-06-10 01:33:49
【问题描述】：

我正在尝试实现一个从 60 秒开始倒计时的计时器。我可以在单击暂停按钮时暂停计时器，但是当我再次单击它以恢复时，它会将计时器重置为 60 秒。

这是代码的sn-p：

var t = 0;

function pause_game(pause_button){
    var elem = document.getElementById('pause_button');
    var lastTime;
    if (elem.value=="PAUSE"){
        lastTime = clearTimeout(t);
        elem.value = "RESUME";
    }
    if (elem.value=="RESUME"){
        countdownTimer(lastTime);
        elem.value = "PAUSE";
    }
}

function countdownTimer(secs) {
    var game_page = document.getElementById('game_page');
    var start_page = document.getElementById('start_page');
    var seconds = 60;
    function tick() {
        var counter = document.getElementById("timer");
        seconds--;
        counter.innerHTML = "0" + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        if(seconds > 0) {
            t = setTimeout(tick, 1000);
        }
        else {
            setTimeout(function () {
            game_page.style.display = 'none';
            start_page.style.display = 'block';
            }, 1000)
        }
    tick();
}

似乎无法弄清楚出了什么问题。帮助将不胜感激。谢谢！

【问题讨论】：

标签： javascript timer resume

【解决方案1】：

t变量不会返回当前倒计时值，它返回setTimeout id，用于取消超时功能。

因此您必须使用另一个变量来记录当前倒计时秒数，并且在 countDownTimer 函数中，而不是将 60 分配给秒，而是分配记录的当前倒计时秒数。

或者您可以使用 setInterval 函数来执行倒计时工作并设置一个暂停布尔值来表示状态：

var paused = false;
var t;
function countDownTimer(seconds){
    //before create another timer, remember to cancel the previous one, if has
    clearInterval(t);
    t = setInterval(function(){
        if(!paused){
          seconds--;
          console.log(seconds);
          //you can do display or whatever things here.
        }
    }, 1000)
}
function pauseOrResumeTimer(){
    paused = !paused;
}

【讨论】：

【解决方案2】：

您无法恢复计时器 - 您可以做的是在“暂停”计时器时捕捉已经过去的时间与剩余时间之间的差异，然后在您想要“取消暂停”时设置该剩余部分的新计时器。

考虑一下我多年前做的一个骨干项目中的这个 sn-p：

/**
 * Method 'pauses' the timer by clearing the timer from the global
 * object timeout queue and logging the remaining time. When we 'unpause',
 * we simply create a new timer with the remaining time.
 * @return MEP.Timer
 */
pause : function () {
    // Don't try to pause if it is already paused.
    if (this.get('state') === 'live') {
        window.clearTimeout(this.get('timerId'));
        this.setRemainingTime(this.get('remaining') - (new Date() - this.get('start')));
        this.setState('paused');
    }
    return this;
},

/**
 * Method sets a timer with the remaining time from the previously paused
 * timer. New timers also call this method by adding the full timer delay
 * as the remaining delay to consolidate functionality.
 * @return MEP.Timer
 */
resume : function () {
    if (this.get('state') === 'paused') {
        this.createTimer(this.get('callback'), this.get('remaining'), null);
    }
    return this;
},

【讨论】：