在另一个函数中使用 javascript 中的按钮停止倒计时

Question

我在 javascript 中进行倒计时，还有一个按钮将 pause/stop 倒计时。

{ "message": "Uncaught ReferenceError: x is not defined", "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使其在函数外也能正常工作？

Answer 1

只需在脚本顶部声明它，以便每个函数都可以引用它：

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>

Answer 2

变量 x 未在函数 start 中定义，因此函数 stop 看不到它。解决它的简单方法，声明 x global.

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 中的按钮停止倒计时

Stopping Countdown using button in javascript in another function

javascript

countdown