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);

我想停止页面上的计时器卸载并将时间保存到DB 用户返回页面后，他们想从暂停的位置恢复计时器。

关于上述内容的任何建议，因为我是javascript新手

Answer 1

我想您已经在那儿了，首先让您的函数通用并公开接口函数以启动和停止计时器。

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;
    }   
}

现在，我们只需要将这些功能绑定到窗口事件，例如，如果要在用户切换选项卡时停止计时器，

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：我们需要在stopTimer中使用startTimer函数，因为我们想要清除以前的setInterval函数，如果不这样做的话{{1 }}回调将在我们每次注册时触发。如果从setInterval's中删除stopTimer，则实际上可以看到该行为。我们还需要重置已经保存的startTimer。

timeLeft是计时器的初始时间，因此第一次是我们要允许的总时间，然后如果用户使用switch选项卡，我们将手动对其进行更新以获取剩余时间

Answer 2

这是代码

function setCookie(cname,cvalue,exdays) 
    {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + ";";
        console.log(cvalue);
    }             
    var x = null; 

    var timeleft= null;



    function startTimer(30)
    {
        stopTimer();

        var event = moment().add(30, 'seconds');

        x = 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;

            if(timeleft<1000)
            {
                clearInterval(x);
                window.alert('Your time has been expired');    
            }            
        },1000);
    }
    window.addEventListener("blur", function(event)
    {
        stopTimer();
    },false);

    window.addEventListener("focus", function(event)
    {
        console.log(getCookie("timeleft"));
        startTimer(timeleft);
    },false)

    function stopTimer()
    {
        if(x !== null)
        {
            clearInterval(x);
            setCookie("timeleft",timeleft,1);
            timeleft=null;
        }
    }

    function getCookie(cname) 
    {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for(var i = 0; i < ca.length; i++) 
        {
            var c = ca[i];
            while (c.charAt(0) == ' ') 
            {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) 
            {
                return valueOf(c);
            }
        }
        return "null";
    }

`

这是我正尝试按照您的回答执行的步骤也请检查评论请协助这个谢谢

停止创建的计时器并节省时间

2 个答案: