Jquery倒计时与同步ajax调用问题

时间:2016-06-17 09:05:08

标签: jquery ajax countdown

某些产品有一个出价网站,并且有一个倒数计时器,应该计算相对于服务器时间的剩余时间。

以下是倒计时的jQuery,并注意调用名为serverTime()的ajax函数的属性serverSync以获取服务器时间。

//Countdown Jquery
$(".anything").countdown("change", {
    until: $.countdown.UTCDate(0, year, month, day, hours, minutes, seconds, 0),
    format:"dHMS",
    serverSync: serverTime
});

//The ajax function that is being called by the countdown script
function serverTime() { 
    var time = null; 
    $.ajax({
        url: "serverTime.php", 
        async: false, 
        dataType: "text", 
        success: function(text) { 
            time = new Date(text); 
        }, error: function(http, message, exc) { 
            time = new Date(); 
        }
    }); 
    return time; 
}

当打开包含来自不同PC的倒计时页面时,倒计时将停止按预期工作。当我从AJAX函数async: false中删除serverTime()时,倒计时工作正常,但它在不同的PC上显示不同的计时器,因为它将花费PC时间而不是服务器时间。

我需要一个解决方案。

1 个答案:

答案 0 :(得分:0)

我认为您正在寻找以下解决方案

//Countdown Jquery
$(".anything").countdown("change", {
    until: $.countdown.UTCDate(0, year, month, day, hours, minutes, seconds, 0),
    format:"dHMS",
    serverSync: serverTime
});

//The ajax function that is being called by the countdown script
function serverTime() {         
    var jqxhr = $.ajax({
        url: "serverTime.php", 
        async: false, 
        dataType: "text", 
        type: "GET", // or "POST"
    });

    // 'async' has to be 'false' for this to work
    var response = {valid: jqxhr.statusText,  data: jqxhr.responseText};

    if (response.valid == 'OK')
    {
        return new Date(response.data);
    }
    else
    {
        alert('not valid');
    }
}

要考虑两个方面:一个是告诉Ajax同步执行(通过设置async:false),另一个是在检查响应后返回结果。

你没有提到像ajax调用的GET或POST方法这样的任何类型。我通过调用GET设置它,但你也尝试使用POST。