Остановка обратного отсчета с помощью кнопки в JavaScript в другой функции

Question

У меня есть обратный отсчет в javascript и кнопка, которая приостановит / остановит обратный отсчет.

{ "message": "Uncaught ReferenceError: x не определено", "filename": "https://stacksnippets.net/js", "бельё": 57, "Кольно": 17 }

function start() {
  var table = document.getElementById("test");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  cell1.colSpan = 2;

  var countDownDate = new Date("Apr 30, 2019 11:12:27").getTime();


  // Update the count down every 1 second
  var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);




    cell1.innerHTML = seconds;

    //document.getElementById("timer").innerHTML = days + "d " + hours + "h "
    //+ minutes + "m " + seconds + "s ";

    if (distance < 0) {
      clearInterval(x);
      cell1.innerHTML = "EXPIRED";
    }
  }, 1000);
}

function stop() {
  clearInterval(x);
}

<table id="test" class="table table-bordered table-responsive">

</table>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>

Я знаю, что ее можно остановить в той же функции, но это всего лишь пример, в моем реальном коде ее нужно остановить вне функции.

Как установить x, чтобы он работал и вне функции?

Answer 1

Переменная x не определена функцией start, поэтому функция stop ее не видит. Простой способ решить эту проблему, объявить x глобальным.

var x;
function start() {
  var table = document.getElementById("test");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  cell1.colSpan = 2;

  var countDownDate = new Date("Apr 30, 2019 11:12:27").getTime();


  // Update the count down every 1 second
  x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);




    cell1.innerHTML = seconds;

    //document.getElementById("timer").innerHTML = days + "d " + hours + "h "
    //+ minutes + "m " + seconds + "s ";

    if (distance < 0) {
      clearInterval(x);
      cell1.innerHTML = "EXPIRED";
    }
  }, 1000);
}

function stop() {
  clearInterval(x);
}

<table id="test" class="table table-bordered table-responsive">

</table>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>

Answer 2

Просто объявите его в верхней части скрипта, чтобы каждая функция могла ссылаться на него:

var x;
function start() {
  var table = document.getElementById("test");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  cell1.colSpan = 2;

  var countDownDate = new Date("Apr 30, 2019 11:12:27").getTime();


  // Update the count down every 1 second
  x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);




    cell1.innerHTML = seconds;

    //document.getElementById("timer").innerHTML = days + "d " + hours + "h "
    //+ minutes + "m " + seconds + "s ";

    if (distance < 0) {
      clearInterval(x);
      cell1.innerHTML = "EXPIRED";
    }
  }, 1000);
}

function stop() {
  clearInterval(x);
}

<table id="test" class="table table-bordered table-responsive">

</table>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>

Но было бы лучше избежать загрязнения глобального пространства имен, так что вы могли бы достичь этого, обернув все это в IIFE и правильно подключив слушателей с помощью Javascript, а не HTML: (встроенные обработчики событий так же плохи, как eval)

(() => {
  let x;
  const [startButton, stopButton] = [...document.querySelectorAll('button')];
  startButton.onclick = start;
  stopButton.onclick = stop;
  function start() {
    var table = document.getElementById("test");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    cell1.colSpan = 2;

    var countDownDate = new Date("Apr 30, 2019 11:12:27").getTime();


    // Update the count down every 1 second
    x = setInterval(function() {

      // Get todays date and time
      var now = new Date().getTime();

      // Find the distance between now an the count down date
      var distance = countDownDate - now;

      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);




      cell1.innerHTML = seconds;

      //document.getElementById("timer").innerHTML = days + "d " + hours + "h "
      //+ minutes + "m " + seconds + "s ";

      if (distance < 0) {
        clearInterval(x);
        cell1.innerHTML = "EXPIRED";
      }
    }, 1000);
  }

  function stop() {
    clearInterval(x);
  }
})();

<table id="test" class="table table-bordered table-responsive">

</table>
<button>Start</button>
<button>Stop</button>