jQuery运行几个动态创建的计时器

Question

我正在努力实现

我的网站有多个crons来获取网站成员游戏信息的外部数据。我正在创建的这个页面显示了最后一次获取的数据范围，时间和我想要实现的内容，倒数计时器直到下次获取。

1. 页面加载
2. 计时器启动
3. 计时器结束
4. 计时器文字：获取数据......
5. 计时器重启

我遇到的问题

使用一个计时器相当容易，但是这个页面需要几十个，因此动态计时器名称可以停止/启动等等。这是一个基本的版本来回答这个问题，因为有几个计时器以这种方式运行，因此30，60，90和120间隔。

我的jQuery Timer - 工作

>> View On CodePen <<

var timer = 20;

var interval = setInterval(function() {
    timer--;

    var H  = Math.floor((timer % (60 * 60 * 24)) / (60 * 60));
    var HH = (H < 9 ? "0" : "") + H;
    var M  = Math.floor((timer % (60 * 60)) / 60);
    var MM = (M < 9 ? "0" : "") + M;
    var S  = Math.floor(timer % 60);
    var SS = (S < 9 ? "0" : "") + S;

    $('.timer').text(HH + ":" + MM + ":" + SS);
    if (timer === 0) clearInterval(interval);
}, 1000);

多次定时器尝试

>> View on CodePen <<

$('.timer').each(function(){
    var timer_interval = $(this).data("interval");
    var timer_name = $(this).data("timer-name");
    startTimer(timer_name, timer_interval);
});
function startTimer(name, interval) {
    var name = setInterval(function() {
        timer--;
        var H  = Math.floor((interval % (60 * 60 * 24)) / (60 * 60));
        var HH = (H < 9 ? "0" : "") + H;
        var M  = Math.floor((interval % (60 * 60)) / 60);
        var MM = (M < 9 ? "0" : "") + M;
        var S  = Math.floor(interval % 60);
        var SS = (S < 9 ? "0" : "") + S;

        $('.timer').text(HH + ":" + MM + ":" + SS);
        if (timer === 0) {
          $('.timer').text("Updating");
          clearInterval(name);
        }
    }, 1000);
}

问题

1. 如何使用动态创建的名称运行多个计时器？
2. 当计时器达到0时，如何检查哪个计时器已停止然后通过循环返回以重启？

Answer 1

我认为Timer函数中未定义startTimer，需要重命名。如果这是您正在寻找的功能，请告诉我。从它目前的工作方式来判断，每个计时器都需要一个Id。如果仍然需要，我会尽可能更新我的答案。

$('.timer').each(function(){
    var timer_interval = $(this).data("interval");
    var timer_name = $(this).data("timer-name");
    startTimer(timer_name, timer_interval);
});
function startTimer(name, interval) {
    var name = setInterval(function() {
        interval--;
        var H  = Math.floor((interval % (60 * 60 * 24)) / (60 * 60));
        var HH = (H < 9 ? "0" : "") + H;
        var M  = Math.floor((interval % (60 * 60)) / 60);
        var MM = (M < 9 ? "0" : "") + M;
        var S  = Math.floor(interval % 60);
        var SS = (S < 9 ? "0" : "") + S;

        $('.timer').text(HH + ":" + MM + ":" + SS);
        if (interval === 0) {
          $('.timer').text("Updating");
          clearInterval(name);
        }
    }, 1000);
}

Answer 2

您可以使用.queue()向一个或多个函数提供queueName以按顺序调用，或者不按顺序调用; .promise()，.then()提供重新安排在queueName数组中调用所有函数时再次调用的函数。

＆＃13;

＆＃13;

function startTimer(queueName, interval, el, next) {
  var timer = interval;
  $(el).data(queueName, setInterval(function() {
    timer--;
    var H = Math.floor((timer % (60 * 60 * 24)) / (60 * 60));
    var HH = (H < 9 ? "0" : "") + H;
    var M = Math.floor((timer % (60 * 60)) / 60);
    var MM = (M < 9 ? "0" : "") + M;
    var S = Math.floor(timer % 60);
    var SS = (S < 9 ? "0" : "") + S;

    $(el).text(HH + ":" + MM + ":" + SS);
    if (timer === 0) {
      $(el).text("Updating");
      clearInterval($(el).data(queueName));
      next();
    }
  }, 1000));
}

function scheduleTimer(elem) {
  return $.when.apply($,
    $.map(elem ? elem : $(".timer"), function(el, index) {
      var timer_interval = $(el).data("interval");
      var timer_name = $(el).data("timer-name");
      return $(el).queue(timer_name, function(next) {
          startTimer(timer_name, timer_interval, el, next)
        }).dequeue(timer_name).promise(timer_name)
        .then(function(el) {
          var timer_name = el.data("timer-name")
          return el.delay(2000, timer_name)
            .queue(timer_name, function(next) {
              scheduleTimer(el)
            }).dequeue(timer_name).promise(timer_name)
        })
    }))
}

scheduleTimer();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div data-interval="30" data-timer-name="Timer1" class="timer">00:00:00</div>
<div data-interval="60" data-timer-name="Timer2" class="timer">00:00:00</div>
<div data-interval="90" data-timer-name="Timer3" class="timer">00:00:00</div>
<div data-interval="120" data-timer-name="Timer4" class="timer">00:00:00</div>

＆＃13;

＆＃13;

＆＃13;