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

Question

我正在使用javascript倒计时和一个暂停/停止倒计时的按钮。

  

{     ＆＃34; message＆＃34;：＆＃34; Uncaught ReferenceError：x未定义＆＃34;，     ＆＃34; filename＆＃34;：＆＃34; https://stacksnippets.net/js＆＃34;，     ＆＃34; lineno＆＃34;：57，     ＆＃34; colno＆＃34;：17   }

＆＃13;

＆＃13;

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);
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

我知道它可以在同一个函数中停止，但它只是一个例子，在我的实际代码中，它必须在函数外停止。

如何设置 x 以便它也可以在函数外部使用？

Answer 1

变量public void addValueToList(Double d, List<Double> inputs , Map<String,Integer> map){ if( d == null ) return; if ( isZero(d) ){ Integer count = map.get("zero"); if(count == null){ count = 1; }else { count ++; } map.put("zero",count); }else if( isNegative(d) ) { Integer count = map.get("negative"); if(count == null){ count = 1; }else { count ++; } map.put("negative",count); }else { Integer count = map.get("positive"); if(count == null){ count = 1; }else { count ++; } map.put("positive",count); } inputs.add(d); } 未定义为函数x，因此函数start无法看到它。 解决它的简单方法，声明stop全局。

＆＃13;

＆＃13;

x

＆＃13;

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);
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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);
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

但最好避免全局命名空间污染，所以你可以通过将整个事物包装在IIFE中并使用Javascript而不是HTML来正确地附加侦听器来实现这一点:(内联事件处理程序与{一样糟糕} {1}}）

＆＃13;

＆＃13;

eval

＆＃13;

(() => {
  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);
  }
})();

＆＃13;

＆＃13;

＆＃13;