防止 JS 定时器溢出答案

【问题标题】：Preventing overflow in JS Timer防止 JS 定时器溢出
【发布时间】：2017-02-17 16:46:13
【问题描述】：

我已经从this 问题的投票最多的答案中做了一个计时器。问题是，当它达到 0 时，它会将日期更改为下一天并启动一个新的 24 小时计时器。

Tl;博士 00:00:00 -> 23:59:59 而不是永远停留在 00:00:00。

我当前的代码：

function getTimeLeft() {
  var seconds_left = end_time - Math.floor(Date.now() / 1000);
  var time_left = new Date(seconds_left * 1000).toISOString().substr(11, 8);
  $('#test-time-left').text(time_left);
}
setInterval(getTimeLeft, 1000);

为了保持00:00:00，我想到了两种解决方法。

首先（恕我直言更好）将在while 循环中给出setInterval(getTimeLeft, 1000);，条件为seconds_left >= 0。但我对此没有什么问题。

我不知道如何在函数之外传递变量。
我不知道阻止 setInterval 是否会做任何事情，但我不妨将间隔设置为 0（因此将其关闭）。

第二种方法是简单地在函数内部执行while：

while( seconds_left >= 0){
      var time_left = new Date(seconds_left * 1000).toISOString().substr(11, 8);
}

问题：

浪费资源，因为JS脚本还在做中

@Edit 最终结果：

function getTimeLeft() {
  var seconds_left = end_time - Math.floor(Date.now() / 1000);
  if (seconds_left <= 0)
  {
    seconds_left = 0;
    clearInterval(timer);
  }
  var time_left = new Date(seconds_left * 1000).toISOString().substr(11, 8);
  $('#test-time-left').text(time_left);
}
var timer = setInterval(getTimeLeft, 1000);

我还将 seconds_left 设置为 0，以防脚本错过 0 秒帧（例如用户在倒计时发生时关闭浏览器）。

【问题讨论】：

标签： javascript ruby-on-rails countdowntimer

【解决方案1】：

假设您想在 seconds_left 等于 0 时停止计时器，您可以简单地清除间隔：

function getTimeLeft() {
  var seconds_left = end_time - Math.floor(Date.now() / 1000);
  var time_left = new Date(seconds_left * 1000).toISOString().substr(11, 8);
  if(seconds_left === 0) {
    clearInterval(timer);  // clear the interval
  }
  $('#test-time-left').text(time_left);
}

var timer = setInterval(getTimeLeft, 1000);  //save the timer in a variable

请注意，您使用 while 循环的想法不会奏效：

while( seconds_left >= 0){
  var time_left = new Date(seconds_left * 1000).toISOString().substr(11, 8);
}

JavaScript 是单线程的，这意味着当您的 while 循环正在运行时，间隔代码将不运行，因此会创建一个无限循环（并可能导致您的浏览器崩溃）。

【讨论】：

是否需要等值、等类型？我想用
如果用户关闭浏览器，间隔会自动取消。应该可以使用<= 而不是===。
Interval 可以，但 Date 会发生变化，但无论如何一切正常。谢谢。

【解决方案2】：

我同意 Rick Hithcock 所说的一切。这是一个基于您的代码的示例，它将计时器设置为从现在开始 10 秒，然后倒计时。

var end_time = new Date();
end_time.setSeconds(end_time.getSeconds() + 10);

function getTimeLeft() {
    var now = new Date();
    var seconds_left = (end_time - now) / 1000;
    if (seconds_left <= 1) {
        clearInterval(timerID);
    }
    var time_left = new Date(seconds_left * 1000).toISOString().substr(11, 8);
    $('#test-time-left').text(time_left);
}
timerID = setInterval(getTimeLeft, 1000);

【讨论】：