倒数计时器落后了

Question

我正在尝试在两个日期之间创建倒计时，但时间过了一段时间就落后了。

我的PHP后端返回当前时间和未来X时间之间的差值，例如当前时间和提前2小时。这个差异在中传递给我的HTML frontent。倒计时类，格式如下03:20:15，我使用javascript函数对差异进行倒计时。以下是我的功能：

$(".countdown").each(function() {
   var $e = $(this);
   var interval = setInterval(function() { 
      var timer2 = $e.html();
      var timer = timer2.split(':');
      var hours = parseInt(timer[0], 10);
      var minutes = parseInt(timer[1], 10);
      var seconds = parseInt(timer[2], 10);
      --seconds;
      minutes = (seconds < 0) ? --minutes : minutes;
      hours = (minutes < 0) ? --hours : hours;
      if(hours < 0) {
         clearInterval(interval);
         window.location.reload();
      } else {
         seconds = (seconds < 0) ? 59 : seconds;
         seconds = (seconds < 10) ? '0' + seconds : seconds;
         minutes = (minutes < 0) ? 59 : minutes;
         minutes = (minutes < 10) ? '0' + minutes : minutes;
         hours = (hours < 10) ? '0' + hours : hours;
         $e.html(hours + ':' + minutes + ':' + seconds);
      }
   }, 1000);
});

代码按预期工作，但几分钟后，比方说2-3分钟，如果您刷新页面或在新窗口中打开它，您将看到倒计时计时器落后秒/分钟。有人知道我做错了什么吗？

Answer 1

您应该计算（new Date（））和目标日期之间的差异。使用这种差异并格式化新的超文本标记语言字符串，而不是将其解析为递减的小时、分钟、秒值。

细节

setInterval api规范表明，CPU负载、其他任务等导致的延迟是可以预料的。https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers

当您认为它们是精确的时，您的处理程序以大约相等的间隔被调用。在第一次迭代时，实际时间可能与计划时间相差很小（比方说4ms）。然而，你改变你的计数器1000毫秒。随着更多的迭代通过，这种差异会积累并变得明显。几分钟足以让这一切发生。

另一方面，如果您预先计算目标日期时间值，并使用当前时间和目标时间之间的差值，那么您的代码将无法感知api的不精确性。

$(".countdown").each(function () {
    var $e = $(this);

    const totalSeconds = (dt) => Math.floor(dt.valueOf() / 1000);

    const f1 = (timer2) => {
        var timer = timer2.split(':');
        var tdt = new Date().setHours(
            parseInt(timer[0]) + tdt.getHours(),
            parseInt(timer[1]) + tdt.getMinutes(),
            parseInt(timer[2]) + tdt.getSeconds());
        return totalSeconds(tdt);
    };

    const targetTime = f1($e.html());

    setInterval(function () {
        var timeSpan = targetTime - totalSeconds(new Date());

        if (timeSpan < 0) {
            window.location.reload();
        } else {
            var seconds = timeSpan % 60;
            var totalMinutes = Math.floor(timeSpan / 60);
            var minutes = totalMinutes % 60;
            var hours = Math.floor(totalMinutes / 60);

            $e.html(hours + ':' + minutes + ':' + seconds);;
        }
    }, 1000);
});

另见：https://jsfiddle.net/8dygbo9a/1/