Jquery Countdown Timer 在页面刷新时没有重置？

Posted 2023-02-24

【中文标题】Jquery Countdown Timer 在页面刷新时没有重置？

【英文标题】：Jquery Countdown Timer no reset on page refresh?

【发布时间】：2013-07-12 04:49:51

【问题描述】：

我有一段代码可以完美运行。当按下按钮时，计时器会倒计时，直到可以再次按下。

问题：当页面刷新时，它会被重置，他们必须再次点击它，然后才会再次倒计时。

目标：计时器在他们剩下的任何时间重新开始。

我的应用程序是php 和mysql，如果这样最有效，但这是我正在使用的代码。

有人知道我将如何获得我正在寻找的功能吗？

JS

$('.trigger').on('click', function(e) 
    $(this).html('show')
    $('.show').slideUp('medium');
    var count = 10,
        counter = setInterval(timer, 1000);

    function timer() 
        count--;
        if (count <= 0) 
            clearInterval(counter);
            $('.trigger').html('hide');
            $('.show').slideDown('medium');
            return;
        
        console.log(count);
        $('.timer').html(count);
    
);

【问题讨论】：

只是一个建议，你仍然可以使用实时来对抗这个，所以如果用户刷新也没关系，因为你的功能违背了实时

@GunrJesra 这将不允许计数器继续，因为您没有其他时间进行比较，因此您无法进行时间跨度比较。

【参考方案1】：

要实现您的目标，有两种方法：

Cookie 或 DataStorage：如果您可以信任您的客户，则此方法很好。

Cookies

javascript Storage

*** Example

数据库存储：您可以对后端进行 ajax 调用并存储用户点击。这种方法的问题是每秒钟都必须重新发送到数据库。

jQuery.ajax

你看到你所看到的原因：

流程如下：

服务器端代码 -> 向客户端发送数据 -> 浏览器开始渲染和执行 JS

您已进入最后一步，因为网络是无状态的，您无需将信息存储在 JavaScript 客户端前端。您必须执行上述操作之一才能解决此问题。

使用以下信息是一个为您量身定制的示例：

演示： jsFiddle

JS

function createCookie(name, value, days) 
    if (days) 
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
     else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";


function readCookie(name) 
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) 
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    
    return null;


function eraseCookie(name) 
    createCookie(name, "", -1);


$('.trigger').on('click', function (e) 
    $(this).html('show')
    $('.show').slideUp('medium');
    var count = 10;
    if (readCookie("timer") != undefined) count = readCookie("timer");

    var counter = setInterval(timer, 1000);

    function timer() 
        createCookie("timer", count, 365);
        count--;
        if (count <= 0) 
            clearInterval(counter);
            $('.trigger').html('hide');
            $('.show').slideDown('medium');
            eraseCookie("timer");
            return;
        
        console.log(count);
        console.log(readCookie("timer"));
        $('.timer').html(count);
    
);

【讨论】：

谢谢，我不知道 HTML5 存储...可能会在新项目中使用它。

好吧，在这种情况下，有没有办法让我确保在他们离开页面或刷新页面之前给他们一个警告，返回后会有 60 秒的延迟，然后安排时间他们回来后60秒？问题是我不想每秒都进行数据库调用，但是如果一个人知道如何更改 cookie，那么成员就不能被信任，其他成员都会处于劣势。

@Jorge 确实很棒，但不幸的是不支持旧版 IE。

@user2579862 绝对，你会想赶上页面离开： $(window).unload( function () alert("Bye now!"); );

cookie 路由实际上会是什么样子？

【参考方案2】：

问题在于 Javascript 不能保持状态。它在每次页面加载时从 0 开始。

对于您需要的功能，您应该在点击计时器 STOP 按钮时保存一个 cookie，并在页面加载时读取它以查看它是否保存了一个值，然后从秒 0 开始。

见：http://www.quirksmode.org/js/cookies.html