如何在达到零时停止计时器

How to stop timer after reaching zero?

本文关键字：计时器 零时      更新时间：2023-09-26

在这个http://jsfiddle.net/kuox9ax2/中，我有一个倒计时计时器。

  • 当它达到零时，它重新开始。它不应该这样做。
  • 由于JS是异步的，我不知道如何让它调用一个函数只有当它已经达到零。

我曾尝试在startTimer()中作为return true，但后来我遇到JS是异步的，所以它立即返回true。

谁能告诉我如何解决这两个问题?

function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;
    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}
window.onload = function() {
  var time = 5, display = document.querySelector('#time');
  var isDone = startTimer(time, display);
  if (isDone) {
    alert("a");
  }
};
<div>Timeout in <span id="time">00:00</span> minutes</div>

将您的间隔存储在一个变量中，当达到0时调用clearInterval。Javascript函数可以作为参数传递，通常称为回调函数。只需传递一个函数作为参数，并在需要时调用它。

function startTimer(duration, display, callback) {
  var timer = duration,
    minutes, seconds;
  var myInterval = setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;
    if (--timer < 0) {
      timer = duration;
      
      // clear the interal
      clearInterval(myInterval);
      // use the callback
      if(callback) {
          callback();
      }
    }
  }, 1000);
}
window.onload = function() {
  var time = 5,
    display = document.querySelector('#time');
  startTimer(time, display, function() { alert('done'); });
};
<div>Timeout in <span id="time">00:00</span> minutes</div>

您可以使用WindowTimers.clearInterval() 

function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  var myInterval = setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;
    if (--timer < 0) {
      clearInterval(myInterval);
      doneFunction();
    }
  }, 1000);
}
window.onload = function() {
  var time = 5, display = document.querySelector('#time');
  startTimer(time, display);
};
function doneFunction(){
  console.log("done !");
}
<div>Timeout in <span id="time">00:00</span> minutes</div>

您不能强制异步方法在异步操作完成后返回—这样做是一种反模式。

相反，您可以将函数传递给方法，以便在异步操作完成时执行。您还需要存储对setInterval()的引用，并在计时器达到零时调用clearInterval()。试试这个:

function startTimer(duration, display, callback) {
  var timer = duration, minutes, seconds;
  var interval = setInterval(function() {
    var minutes = parseInt(timer / 60, 10)
    var seconds = parseInt(timer % 60, 10);
    display.textContent = ("00" + minutes).slice(-2) + ":" + ("00" + seconds).slice(-2);
    
    if (minutes === 0 && seconds === 0) {
      clearInterval(interval);
      callback && callback();
    }
    timer--;
  }, 1000);
}
window.onload = function() {
  var time = 5, display = document.querySelector('#time');
  
  startTimer(time, display, function() {
    console.log("timer reached zero");
  });
};
<div>Timeout in <span id="time">00:00</span> minutes</div>

相关文章：