javascript - 每 30 秒运行一次 ajax 并显示倒数计时器

Question

我有一个函数，我想每 30 秒运行一次。这很好用

$(document).ready(function(){
    setInterval(function() {
        jQuery.ajax({
            type: "GET",
            url: "loaddata.php",
            dataType:"json",
            success:function(response){
                if (response) {
                    // Process
                }
                else {
                    // Process 
                }
            }

        });
    }, 30000);
});

但我想弄清楚如何显示与 setInterval 内联的倒数计时器。换句话说，它应该显示在 ajax 运行之前还剩多少秒，一旦该函数运行，它应该重置计时器并再次从 30 秒开始倒计时。这个过程会不断重复。我找到了几个倒数计时器的示例，但我不知道如何将其与 ajax 请求同步并重置。

非常感谢任何帮助!

Answer 1

只需每秒运行一个函数，并有一个倒数到 0 的计数器。当它达到 0 时，运行您的 ajax 代码并重置计数器。像这样:

var count = 30;
setInterval(function() {
    count--;

    // update timer here

    if (count === 0) {
        count = 30;
        // ajax code here
    }
}, 1000);

将计时器中的初始显示值设置为 30。然后将显示 29,28,27,...,2,1,0,29,28 等。