我怎样才能重置我的倒计时并避免多个计时器

Question

我用js做了一个定时器倒计时。它在单击事件后运行。问题是当我再次单击时，计时器不会重置，它会创建另一个倒计时，但前一个仍然有效。当我再次点击时，我想重置第一个。

我尝试使用明确的间隔，但不确定是否正确使用它。

function countdownto(target, time, callback) {
  var finish = new Date(time);
  var s = 1000,
    m = s * 60,
    h = m * 60,
    d = h * 24;

  (function timer() {
    var now = new Date();
    var dist = finish - now;

    var days = Math.floor(dist / d),
      hours = Math.floor((dist % d) / h),
      minutes = Math.floor((dist % h) / m),
      seconds = Math.floor((dist % m) / s);

    var timestring = minutes + ' minute(s) ' + seconds + ' seconde(s)';
    target.innerHTML = timestring

    if (dist > 0) {
      setTimeout(timer, 1000);
    } else {
      callback()
    }

  })()

}

var submitBtn = document.getElementById('yes');

submitBtn.addEventListener("click", function(e) {

  // countdown element
  var countdownel = document.getElementById('clockdiv');

  // 20 min
  var time = new Date()
  time.setSeconds(time.getSeconds() + 1200)


  // countdown function call
  countdownto(countdownel, time, function() {
    alert('end');
  })

})

<button id="yes"></button>

<div><span id="clockdiv">countdown
    </span></div>

Answer 1

您需要清除每次点击的最后超时时间。

为此创建一个全局变量并将超时分配给。在每次点击后可以使用 clearTimeout

观看现场演示

var timeout;

function countdownto(target, time, callback) {
  var finish = new Date(time);
  var s = 1000,
    m = s * 60,
    h = m * 60,
    d = h * 24;

  (function timer() {
    var now = new Date();
    var dist = finish - now;

    var days = Math.floor(dist / d),
      hours = Math.floor((dist % d) / h),
      minutes = Math.floor((dist % h) / m),
      seconds = Math.floor((dist % m) / s);

    var timestring = minutes + ' minute(s) ' + seconds + ' seconde(s)';
    target.innerHTML = timestring

    if (dist > 0) {
      timeout = setTimeout(timer, 1000);
    } else {
      callback()
    }

  })()

}

var submitBtn = document.getElementById('yes');

submitBtn.addEventListener("click", function(e) {
  clearTimeout(timeout)
  // countdown element
  var countdownel = document.getElementById('clockdiv');

  // 20 min
  var time = new Date()
  time.setSeconds(time.getSeconds() + 1200)


  // countdown function call
  countdownto(countdownel, time, function() {
    alert('end');
  })

})

<button id="yes">yes</button>

<div><span id="clockdiv">countdown
    </span></div>

注意：您正在使用 setTimeout 模拟 setInterval。我认为在你的情况下直接使用 setInterval 更好

Answer 2

setTimeout(timer, 1000) returns 内部计时器 ID。要停止您在 setTimeout() 中传递的功能，您必须通过调用 clearTimeout(ID) 函数来停止计时器并传递您从 setTimeout() 获得的内部计时器 ID 另外我建议你使用 setInterval():

var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

停止myTimer功能清除myVar

clearTimeout(myVar);

我怎样才能重置我的倒计时并避免多个计时器

How can i reset my countdown and avoid multiple timer

javascript

settimeout