Как я могу сбросить обратный отсчет и избежать нескольких таймеров - PullRequest
Новая
       3

Как я могу сбросить обратный отсчет и избежать нескольких таймеров

3 голосов
/ 24 мая 2019

Я сделал таймер обратного отсчета в 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>

Ответы [ 2 ]

2 голосов
/ 24 мая 2019

Необходимо очищать последний тайм-аут при каждом клике.

Для этого создайте глобальную переменную и присвойте время ожидания.После того, как вы можете использовать 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>

Примечание. Вы моделируете setInterval с помощью setTimeout.Я думаю, что лучше использовать setInterval в вашем случае

1 голос
/ 24 мая 2019

setTimeout (timer, 1000) возвращает идентификатор внутреннего таймера. Чтобы остановить функцию, которую вы передали в setTimeout (), вы должны остановить таймер, вызвав функцию clearTimeout (ID) и передав внутренний идентификатор таймера, полученный из setTimeout (). Также я рекомендую вам использовать setInterval (): 

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

до остановки myTimer функция очистки myVar

clearTimeout(myVar);
...