javascript - 停止创建的计时器并保存时间

Question

我用 moment.js 创建了一个计时器，如下所示:

    var event = moment().add(15, 'minutes');

    var x = setInterval(function (){
        var now = moment();
            var timeleft = event - now;

            var minutes = Math.floor((timeleft % (1000*60*60))/(1000*60));
            var seconds = Math.floor((timeleft % (1000*60))/1000);

            document.getElementById("timer").innerHTML =''+minutes+'     '+seconds;
    },1000);

我想在页面卸载时停止计时器并将时间保存到数据库用户返回页面后，他们希望从暂停的地方恢复计时器。

对于上面的任何建议，因为我是 javascript 的新手

Answer 1

我想你已经在那里了，首先让你的函数通用并公开接口(interface)函数来启动和停止计时器。

var timer = null;
var timeleft = null;

function startTimer(threshold) {

    stopTimer();

    var event = moment().add(threshold, 'minutes');
    timer = setInterval(function (){
        var now = moment();
        timeleft = event - now;

        var minutes = Math.floor((timeleft % (1000*60*60))/(1000*60));
        var seconds = Math.floor((timeleft % (1000*60))/1000);

        document.getElementById("timer").innerHTML =''+minutes+'     '+seconds;
    }, 1000);
}

function stopTimer() {
    if(timer !== null) {
        clearInterval(timer);
        saveTime(timeLeft); //save this time to storage
        timeLeft = null;
    }   
}

现在我们只需要将这些函数绑定(bind)到窗口事件，例如，如果你想在用户切换标签时停止计时器，

window.addEventListener("blur", function( event ) {
    stopTimer()
}, false);

同样，当用户切换回标签页时，您可以启动计时器

window.addEventListener("focus", function( event ) {
   // get the last saved timeLeft and pass it to startTimer
   // Note you can store the timeLeft in either cookie or database
   startTimer(timeLeft)
}, false);

警告代码未经测试

更新1:我们需要startTimer中的stopTimer函数，因为我们要清除之前的setInterval函数，如果我们不这样做，那么 setInterval 的 回调将在我们每次注册时触发。如果从 startTimer 中删除 stopTimer，您实际上可以看到该行为。我们还需要重置已经保存的 timeLeft。

threshold 是定时器的初始时间，所以第一次它将是我们想要允许的总时间，然后如果用户切换标签，我们将手动更新它以获得剩余时间