Question

我是Java的新手，现在我正在尝试倒数计时器。每次完成倒数计时时，页面弹出警报框都会显示：倒数结束。但是每次我单击“确定”时，警报框都不会关闭。我认为它与man bash函数有关，但是我不知道如何解决它。

windows.onload

function startTimer(duration, display) {
  var timer = duration,
    minutes,
    seconds;

  setInterval(function() {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;

    display.textContent = minutes + ':' + seconds;

    if (--timer < 0) {
      timer = 0;
      alert('countdown finished');
      document.getElementById('demo').innerHTML = 'EXPIRED';
    }
  }, 1000);
}

window.onload = function() {
  var fiveMinutes = 60 * 0.1,
    //display = document.querySelector('#time');
    display = document.getElementById('demo');
  startTimer(fiveMinutes, display);
};

Answer 1

时间到了，您需要clearInterval。否则，setInterval不会停止触发您的回调。尝试这样的事情：

function startTimer(duration, display) {
  var timer = duration,
    minutes,
    seconds;

  var interval = setInterval(function() { // <-- `var interval =` is important
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;

    display.textContent = minutes + ':' + seconds;

    if (--timer < 0) {
      timer = 0;
      alert('countdown finished');
      document.getElementById('demo').innerHTML = 'EXPIRED';
      clearInterval(interval); // <-- this is also important
    }
  }, 1000);
}

Answer 2

您的问题是您不清除间隔。因此，如果您的计时器结束了，您仍然可以调用检查“我的计时器是否小于0”并显示“间隔”。

用于清除间隔的基本JS：

var myInterval = setInterval(function(){...}, 1000);
clearInterval(myVar); //the interval won't be called again

function startTimer(duration, display) {
  var timer = duration,
    minutes,
    seconds;

  var myInterval = setInterval(function() {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;

    display.textContent = minutes + ':' + seconds;

    if (--timer < 0) {
      timer = 0;
      console.log('countdown finished');
      document.getElementById('demo').innerHTML = 'EXPIRED';
      clearInterval(myInterval)
      
    }
  }, 1000);
}

window.onload = function() {
  var fiveMinutes = 60 * 0.1,
    //display = document.querySelector('#time');
    display = document.getElementById('demo');
  startTimer(fiveMinutes, display);
};

<h1>conutdown</h1>
<p id="demo"></p>
<!-- <div>Registration closes in <span id="time">05:00</span> minutes!</div> -->

Answer 3

您必须使用clearInterval()

清除间隔

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>countdown</title>
  </head>

  <body>
    <h1>conutdown</h1>
    <p id="demo"></p>
    <!-- <div>Registration closes in <span id="time">05:00</span> minutes!</div> -->

<script>

function startTimer(duration, display) {
  var timer = duration,
    minutes,
    seconds;

var intrvl = setInterval(function() {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;

    display.textContent = minutes + ':' + seconds;

    if (--timer < 0) {
      timer = 0;
      alert('countdown finished');
      document.getElementById('demo').innerHTML = 'EXPIRED';
      clearInterval(intrvl); // Clears interval
    }
  }, 1000);
}

window.onload = function() {
  var fiveMinutes = 60 * 0.1,
    //display = document.querySelector('#time');
    display = document.getElementById('demo');
  startTimer(fiveMinutes, display);
};

</script>
</body>
</html>

警报框javascript无法关闭，因为window.onload

3 个答案: