Question

我正在显示一个关于给定结束时间的倒计时表。

虽然它的工作完美，但我想知道哪种方法最适用。

下面的

是我的倒计时功能。

  var timerId;
  var postData = {endDate : endDate, tz : tz};  
  var countdown = function()
    { 
      $.ajax({
               type : 'post',
               async : false,
               timeout : 1000,
               url : './ajax_countdown.php',
               data : $.param(postData),
               dataType : 'json',
               success : function (resp){
                  $('#currentTime').html(resp.remainingTime);
               }
            }); 
     }

我想要的是该功能（倒计时）应该在每1秒后自动调用，如果它在1秒内没有执行/完成，则取消当前的ajax并开始新的ajax调用。

现在我发现 4种工作方法

方法1：使用 setInterval（）和窗口对象

window.setInterval(countdown, 1000);

方法2：独立使用 setInterval（）

setInterval(function() {countdown()}, 1000);

方法3：在函数内部使用 setTimeOut 调用其他函数初始化主函数

var countdown = function() { 
     $.ajax({ //ajax code });
     timerId = setTimeout(countdown, 5000); // assign to a variable
 }

function clockStart() {  
        if (timerId) return
        countdown();
}
clockStart(); // calling this function

方法4：使用匿名函数调用

var countdown = function() { 
     $.ajax({ //ajax code });
     timerId = setTimeout(countdown, 5000);
 }
  (function(){
         if (timerId) return;
         countdown();
})();

请告诉我

每种方法的con和pro是什么，哪种是最佳/正确的方法？
我应该使用clearTimeOut()还是clearInterval()？

参考

http://javascript.info/tutorial/settimeout-setinterval

Calling a function every 60 seconds

http://www.electrictoolbox.com/using-settimeout-javascript/

Answer 1

我不会使用你的任何方法。原因是setTimeout和setInterval do not guarantee that your code will execute after the specified delay。这是因为JavaScript是单线程的。

如果我需要在指定的延迟后只调用一次函数，那么我使用setTimeout。但是，如果我需要在固定的时间间隔后调用函数，那么我不使用setInterval。相反，我使用delta timing。这是code。

使用增量计时的优点是您的代码将执行更接近您指定的固定时间间隔。它纠正了自己。创建和使用增量计时器很简单。例如，您的代码将按如下方式编写：

var timer = new DeltaTimer(function (time) {
    $.ajax({
        // properties
    });

    if (time - start >= 5000) timer.stop();
}, 1000);

var start = timer.start();

上面的delta计时器优于setInterval（方法1），使用setTimeout（方法2）但也纠正自身，使用函数启动计时器（方法3），并且没有用特殊的clockStart函数污染范围（方法4）。

此外，您可以轻松获得定时器启动后调用函数的确切时间，因为调用函数的时间作为参数传递给函数。计时器还有一个stop方法来停止计时器。要再次启动，请再次致电start。

修改

如果你想使DeltaTimer更像setInterval（自动启动计时器），你可以按如下方式实现一个spawn函数：

DeltaTimer.spawn = function (render, interval) { var timer = new DeltaTimer(render, interval); var start = timer.start = function (start) { return function () { render.start = start(); }; }(timer.start); start(); return timer; };

然后您可以按如下方式自动创建和启动DeltaTimer：

var timer = DeltaTimer.spawn(function countdown(time) { $.ajax({ // properties }); if (time - countdown.start >= 5000) timer.stop(); }, 1000);

因此var timer = DeltaTimer.spawn(funct, delay);相当于var interval = setInterval(funct, delay);，而timer.stop();相当于clearInterval(interval);。我想这就像你可以自动化它一样。

Answer 2

使用＃1优于＃2的好处是window引用消除了覆盖范围变量setInterval的可能性。

// When out of global scope...
function setInterval() {

}

window.setInterval(foo, 100); // still calls the "correct" setInterval

在函数（＃1，＃2）中包含对countdown的调用之间没有区别。＃2为您提供了更大的灵活性，因为您也可以调用其他函数/传递参数等（尽管如果出现这种情况，从＃1交换到＃2显然是微不足道的。）

＃4保存您必须声明一个函数clockStart，除此之外，它与＃3相同。

如果您使用clearTimeout，请使用setTimeout;如果您使用clearInterval，则使用setInterval ...

您还应该了解setTimeout和setInterval的工作方式有何不同。有一个惊人的答案here解释了......

至于我用的是什么？我会用＃2。

Answer 3

如果您正在创建倒计时，那么为什么您不使用jquery插件并根据您的要求进行自定义？在这里结帐

http://www.tripwiremagazine.com/2012/05/jquery-countdown-scripts.html

setTimeOut（）或setInterval（）。 4种方法同样适用。哪个最好？