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

Question

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

1

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

{"message": "Uncaught ReferenceError: x не определен", "filename": " https://stacksnippets.net/js ", "lineno": 57, "colno": 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 чтобы он работал вне функции?

Raja 30 апр. 2018, в 08:50

Источник

Теги:

javascript

countdown

2 ответа

0

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

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: (inline обработчики событий так же плохи, как 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>

CertainPerformance 30 апр. 2018, в 04:27

Ещё вопросы

Zeyad Etman · Accepted Answer · 2018-04-30T03-24-00.000Z

Переменные 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>

Ваш ответ сработал, как я хочу, небольшая помощь от вас, можно ли упростить этот javascript в одну строку?
Конечно, вы можете использовать более новую версию js, например: const timeoutSetter = (arr)=>arr.forEach(classNameId=>document.getElementById(classNameId).setAttribute('class', 'timeout')); затем вызовите эту функцию, например, timeoutSetter(["A1","B1","C1","D1"]) Я предпочитаю эти две строки одной строке. объявить функцию и вызвать ее. @Раджа