javascript - 防止JS定时器溢出

Question

我已经做了一个定时器 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。但我对此没有什么问题。

1. 我不知道如何在函数外部传递变量。

2. 我不知道阻止 setInterval 是否会起到任何作用，但我不妨将间隔设置为 0(因此将其关闭)。

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

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

问题:

1. 浪费资源，因为JS脚本还在完成

@编辑最终结果:

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 秒帧(例如用户在倒计时发生时关闭浏览器)。

Answer 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 循环运行时，间隔代码将根本不会运行，因此会创建一个无限循环(并可能导致您的浏览器)。