Question

我正在使用jQuery Countdown plugin来实现倒计时，并在计时器到期时调用web服务。

问题是我在页面上使用AJAX，并且必须在每个AJAX请求上重新设置倒计时，如下所示：

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(SetupTimer);

/*Initial setup*/
$(document).ready(function() {
    SetupTimer();
});

function SetupTimer() {
        var serverTime = new Date();
        var cutoffTime = new Date($("#<%= cutoffTime.ClientID %>").val());
        serverTime.setHours(serverTime.getHours());
        if (serverTime < cutoffTime) {
            $('#timer').countdown('destroy'); /*should work, but doesn't*/
            $('#timer').countdown({ until: cutoffTime, serverTime: serverTime, onExpiry: OrderingEnded, format: 'yowdHMS' });
        } 
        else
            OrderingEnded();
    }

由于某种原因，这会在所有请求中创建一个新的倒计时实例，导致在倒计时到期时多次调用Webservice。

如何确保一次只存在一个倒计时实例？

修改

在文档中发现了这一点，虽然

不适合我

        $('#timer').countdown('destroy');

Answer 1

好吧，想通了，只需要打电话给

$('#timer').countdown('destroy');

on beginRequest

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(DeleteTimer);
prm.add_endRequest(SetupTimer);

$(document).ready(function() {
    SetupTimer();
});


function DeleteTimer() {
    $('#timer').countdown('destroy');
}
function SetupTimer() {
    var serverTime = new Date();
    var cutoffTime = new Date($("#<%= cutoffTime.ClientID %>").val());
    serverTime.setHours(serverTime.getHours());
    if (serverTime < cutoffTime) {          
        $('#timer').countdown({ until: cutoffTime, serverTime: serverTime, onExpiry: OrderingEnded, format: 'yowdHMS' });
    } 
    else
        OrderingEnded();
}

Answer 2

你可能想要setInterval()。它允许您每X毫秒重复一次计时器。您可以使用clearInterval()来停止它。

Here is some reading比较setInterval()和setTimeout()。

仅在AJAX调用的回调函数中重新创建计时器的另一个选项。这将确保只有在前一个AJAX调用完成后才启动新计时器，例如：

 function CheckServer() {
     $.get('/get_something.html', function() {
         timer = setTimeout('CheckServer', 5000);
     });
 }

Answer 3

我有类似的问题。我正在使用Web服务使用jquery.countdown.js插件中的serversync函数从服务器获取当前时间。我有一个问题

How countdown get Synchronise with jquery using "jquery.countdown.js" plugin?

请您找到解决方案并告诉我们。

jQuery Countdown插件和AJAX

修改

3 个答案: