javascript - 调整setInterval的间隔

Question

我正在尝试创建递增数字的函数，因此它看起来像数字时钟之类的东西。该函数采用两个时间戳作为参数，并在它们之间递增。但由于 hh(小时)的范围比 mm(分钟)小，因此小时总是先结束。我希望两者同时完成。

这是我的代码。

    var start =  $('.clock').attr('data-from').split(":"); //eg. 10:23
    var end = $('.clock').attr('data-to').split(":"); //eg 18:38

    var clock = function (start, end, el) {
        if($('.clock').length) {
            var interval = setInterval(function() {
                el.text(start);
                if (start >= end) {
                    clearInterval(interval);
                }
                start++;
            }, 50);
        }

    };

    clock(start[0],end[0],$('.clock .h'));
    clock(start[1],end[1],$('.clock .m'));

那么，如何让时间间隔同时完成两个动画呢？

Answer 1

我之前的答案没有正确有效地使用“动画时间”，并且某些值的发布速度会比其他值慢，因此我删除了该值并将其简化为:fiddle: https://jsfiddle.net/MarkSchultheiss/67wyzk2m/2/

标记

<div class="container" data-from="01:00" data-to="18:50">
  <span class="h"></span>
  <span>.</span>
  <span class="m"></span>
</div>

新代码:

var clockR = function(start, end, el, timerP) {
  var currentCount = start;
  el.text(currentCount);
  var timer = timerP || 1;
  var interval = setInterval(function() {
    el.text(currentCount);
    if (start >= end) {
      clearInterval(interval);
    }
    currentCount++;
  }, timer);
};
var start = $('.container').attr('data-from').split(":");
var end = $('.container').attr('data-to').split(":");
var animateLength = 30000; // ms to count for
var s0 = end[0] - start[0];
var s1 = end[1] - start[1];
var t0 = Math.abs(Math.trunc(animateLength / s0));
var t1 = Math.abs(Math.trunc(animateLength / s1));

clockR(start[0], end[0], $('.container .h'), t0);
clockR(start[1], end[1], $('.container .m'), t1);