Устранение неполадок при остановке таймера обратного отсчета

Question

Я создал простой таймер обратного отсчета для отображения обратного отсчета в 45 секунд. Я пытаюсь управлять этим таймером двумя кнопками, используя функцию onclick JavaScript. Одна кнопка запустит таймер, а другая остановит его. Я могу запустить время и отобразить его на экране, но не могу его остановить. Я нашел онлайн-скрипт времени и изменил его, чтобы показывать только секунды.

Я попытался создать глобальный идентификатор (в данном случае «var xx;»), чтобы очистить интервал, но ничего не получилось. Я не уверен, чего не хватает. Вот важные части моего кода, используя Bootstrap 4.

// create a global variable to reset the interval later
var xx;

// Visible Coundown 45s function
function VisibleCountDownTimer45s() {

// reset internval if it is already in defined.
if(xx != undefined) {
clearInterval(xx)
};

// Set the date we're counting down to
   var countDownDate = new Date().getTime() + 45000;
// Update the count down every 1 second
   var xx = setInterval(function() {
// Get today's date and time
   var now = new Date().getTime();
// Find the distance between now and the count down date
   var distance = countDownDate - now;
// console.log (distance);
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
        document.getElementById("demo").innerHTML =  seconds + "s ";
// If the count down is finished, write some text
        if (distance < 0) {
            clearInterval(xx);
            document.getElementById("demo").innerHTML = "";
          }
        }, 1000);
    }	 

<!-- timer display box -->

<div class="container">
<div class="row mb-3">
<div class="col-md-4">&nbsp;</div>
<div class="col-md-4 text-center pb-3" id="demo"><span class="border border-secondary p-2">show     timer here</span></div>
<div class="col-md4">&nbsp;</div>	
</div>
</div>

<!-- control buttons -->

<div class="container">
<div class="row">
<div class="col-md-4 text-right"><button class="btn btn-primary" onclick="VisibleCountDownTimer45s()">Start visible Timer</button></div>
<div class="col-md-4 text-center" id="Counter"><p>&nbsp;</p></div>
<div class="col-md4 text-left"><button class="btn btn-primary" onclick="clearInterval(xx)">Stop visible Timer</button></div>	
</div>
</div>

Answer 1

Ваша проблема в том, что внутри вашей функции VisibleCountDownTimer45s() вы переделываете переменную локальной области с именем xx. Удалите ключевое слово var, и вы назначите таймер глобальной переменной xx, доступной для других функций. Это известно как проблема scope .

Изменение: var xx = setInterval(function() {

Кому: xx = setInterval(function() {

См.

// create a global variable to reset the interval later
var xx;

// Visible Coundown 45s function
function VisibleCountDownTimer45s() {

  // reset internval if it is already in defined.
  if (xx != undefined) {
    clearInterval(xx)
  };

  // Set the date we're counting down to
  var countDownDate = new Date().getTime() + 45000;
  // Update the count down every 1 second
  xx = setInterval(function() {
    // Get today's date and time
    var now = new Date().getTime();
    // Find the distance between now and the count down date
    var distance = countDownDate - now;
    // console.log (distance);
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    // Display the result in the element with id="demo"
    document.getElementById("demo").innerHTML = seconds + "s ";
    // If the count down is finished, write some text
    if (distance < 0) {
      clearInterval(xx);
      document.getElementById("demo").innerHTML = "";
    }
  }, 1000);
}

<div class="container">
  <div class="row mb-3">
    <div class="col-md-4">&nbsp;</div>
    <div class="col-md-4 text-center pb-3" id="demo"><span class="border border-secondary p-2">show     timer here</span></div>
    <div class="col-md4">&nbsp;</div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-4 text-right"><button class="btn btn-primary" onclick="VisibleCountDownTimer45s()">Start visible Timer</button></div>
    <div class="col-md-4 text-center" id="Counter">
      <p>&nbsp;</p>
    </div>
    <div class="col-md4 text-left"><button class="btn btn-primary" onclick="clearInterval(xx)">Stop visible Timer</button></div>
  </div>
</div>

Также стоит отметить, что вы можете достичь того же результата, не используя объект Date и не вычисляя прошедшее время относительно него.

let timer;

function startTimer(interval) {
  if (timer !== undefined) {
    clearInterval(timer);
  };
  timer = setInterval(function() {
    interval -= 1000
    if (interval <= 0) {
      clearInterval(timer);
      document.getElementById("demo").innerHTML = "";
    } else {
      const seconds = Math.floor(interval / 1000);
      document.getElementById("demo").innerHTML = seconds + "s ";
    }
  }, 1000);
}

<div class="container">
  <div class="row mb-3">
    <div class="col-md-4">&nbsp;</div>
    <div class="col-md-4 text-center pb-3" id="demo"><span class="border border-secondary p-2">show     timer here</span></div>
    <div class="col-md4">&nbsp;</div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-4 text-right"><button class="btn btn-primary" onclick="startTimer(45000)">Start visible Timer</button></div>
    <div class="col-md-4 text-center" id="Counter">
      <p>&nbsp;</p>
    </div>
    <div class="col-md4 text-left"><button class="btn btn-primary" onclick="clearInterval(timer)">Stop visible Timer</button></div>
  </div>
</div>