Question

你会认为从日志中掉落会很容易，而且我相信这对我来说很容易，但是现在我希望快速帮助完成这个。我有一个倒计时，我有一个页面用ajax刷新其内容。重新启动倒计时应该由页面更新完成触发...如果更新失败，应该有一个重试处理程序。我很高兴能够知道如何在达到0时重新开始倒计时

我的倒计时从60秒到0，增量为5秒。这有效：

    $(document).ready(function(){
    var counter = 60;

    var seks = $('#seks').html(counter);//save copy to reduce querying
    var interval = setInterval(function() {
        counter -= 5;
        seks.fadeOut('slow',function(){//use callback after animation
        seks.html(counter).fadeIn('slow');//now fade back in once out is done
    });
    if (counter == 0) {
        clearInterval(interval);

    }
}, 5000);
});</script>

html是这样的：

Next update in <span id="seks"></span> seconds</h5>

问题是在页面更新后重新开始倒计时。我尝试了一些变体，我认为这可能会这样做，在更新页面的脚本中添加一个启动调用或尝试一个，但它不起作用：

setInterval(function() {
    var fadeInData = function fadeInData() { $('#updateshere').fadeIn(); }
    var loadData = function loadData() { $('#updateshere').load('http://launchpad-001.com/_firingRange/_danTestPageHits/', fadeInData); }
    $('#updateshere').fadeOut(loadData);  
    interval(); /*  added this to try resetting interval timer, but it does nto work*/
}, 60000);

Answer 1

最好将setInterval放入自己的函数中，然后在计数器达到零时调用它。请参阅下面的此片段。对于演示，我使计时器以10秒开始，并且每2秒更新一次以进行演示。

$(document).ready(function(){
    var seconds = 10;
    var atInterval = 2;
    var counter = seconds;

    var seks = $('#seks').html(counter);//save copy to reduce querying
    var interval;
    var startInterval = function(){ 
        interval = setInterval(function() {
            counter -= atInterval;
            seks.fadeOut('slow',function(){//use callback after animation
                seks.html(counter).fadeIn('slow');//now fade back in once out is done
            });
            if (counter == 0) {
                clearInterval(interval);

                // Reset the counter, and start the interval timer again
                counter = seconds;
                startInterval();
            }
        }, atInterval*1000);
    };
  
  startInterval();
  
  setInterval(function() {
    var fadeInData = function fadeInData() { $('#updateshere').fadeIn(); }
    var loadData = function loadData() { $('#updateshere').load('http://launchpad-001.com/_firingRange/_danTestPageHits/', fadeInData); }
    $('#updateshere').fadeOut(loadData);  
   
}, seconds*1000); 
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Next update in <span id="seks"></span> seconds</h5>

在倒闭结束后将倒计时重置为开始时再次开始

1 个答案: