JQuery 如果页面关闭，倒数计时器不计数

Question

我的倒计时有问题，我可以将计时器存储在本地存储中，但如果我关闭页面，计时器不计数，如果我再次打开页面，计时器将再次开始计时。当我关闭页面并再次打开它时，如何使计时器仍在计数。我正在使用 keith-wood countdown

这是我的代码

$(function () {
    var temporary=3600;
    if (window.localStorage.getItem("detik")!=null)
    {
        temporary=window.localStorage.getItem("detik");
    }
    else {
        window.localStorage.setItem("detik",temporary);
    }
    $('#defaultCountdown').countdown(
         {
            until:+temporary,
            compact: true, 
            onExpiry: end,
            onTick:function(e)
            {
                var detik=(e[4]*3600)+(e[5]*60)+e[6];
                window.localStorage.setItem("detik",detik);
            }});
});

function end() { 
    alert('We have lift off!'); 
}

谢谢你，干杯！

Answer 1

嗯，您不能指望 javascript 在页面关闭时继续倒计时。因此，与其保存剩余的秒数，不如保存计时器将达到 0 的时间戳。

var reachZeroOn;
if (window.localStorage.getItem("reachZeroOn") !== null) {
    reachZeroOn = new Date(window.localStorage.getItem("reachZeroOn"));
} else {
    reachZeroOn = new Date((new Date).getTime() + 3600000);
    window.localStorage.setItem("reachZeroOn", reachZeroOn);
}

$('#defaultCountdown').countdown({
    until: reachZeroOn,
    compact: true, 
    onExpiry: end,
});

function end() { 
    alert('We have lift off!'); 
}

工作示例：jsFiddle

Answer 2

确实，如果您关闭浏览器或离开浏览器，页面 JavaScript 不会运行。

因此，如果您将剩余秒数存储在 localStorage 中，那么当您返回时，该数字将不会改变，从而产生您注意到的行为。

您应该存储计数器倒计时的绝对时间，而不是存储剩余秒数。这个值在倒计时期间不会改变，所以如果你离开页面再回来也不会有问题。您也不必每次都更新 localStorage。

代码如下：

    // read previous deadline (unix time) or default to
    // current time + 1 hour:
    var deadline = +window.localStorage.getItem("detik")
                 || new Date().getTime() + 3600*1000;
    // save this time:
    window.localStorage.setItem("detik", deadline);

    if (deadline < new Date().getTime()) {
        // In case during the user's absence the timer already expired:
        end();
    } else {
        $('#defaultCountdown').countdown({
            until: new Date(deadline),
            compact: true,
            onExpiry: end,
        });
    }

确保先删除您可能已有的 localStorage 条目。

JQuery 如果页面关闭，倒数计时器不计数

JQuery Countdown timer not counting if page closed

jquery

timer

countdown