Question

[注意-脚本在JSfiddle中不起作用，但在chrome中可以正常工作] 下面的脚本包含一个3秒计时器，该计时器在完成时会显示文本“ Time Up！”。这在第一次尝试时效果很好，但是在下一次尝试中，它开始混合秒和文本“ Time Up！”。（在几秒钟之间显示）。为什么会发生这种情况？

http://jsfiddle.net/starzar/86uqrtzs/32/

function timer() {
  var t = 3;

  console.log("timer started t = " + t);


  setInterval(function() {
    if (t >= 0) {
      document.getElementById("timer").innerHTML = t;
      console.log(t);
      t--;
    } else {
      document.getElementById("timer").innerHTML = "Time Up!";
    }
  }, 1000);


  console.log("timer stopped t = " + t);
}

<html>

<head>

  <script src=timer.js></script>

</head>

<body>


  <input type=Reset onclick=timer()> <br>

  <hi id="timer"></hi> <br>

</body>

</html>

Answer 1

因为您需要使用clearInterval()...清除它！

看下面的代码作为参考：

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_clearinterval

var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
  clearInterval(myVar);
}

<!DOCTYPE html>
<html>

<body>
  <p>A script on this page starts this clock:</p>
  <p id="demo"></p>
  <button onclick="myStopFunction()">Stop time</button>
</body>

</html>

Answer 2

开始间隔时，如果不清除间隔，它将一直持续下去。

您在第一个通话中开始的第一个间隔仍在后台运行。您可以在下面的示例中清楚地看到它。

您应该使用clearInterval()

function timer() {
  var t = 3;

  console.log("timer started t = " + t);


  setInterval(function() {
    if (t >= 0) {
      document.getElementById("timer").innerHTML = t;
      console.log(t);
      t--;
    } else {
      console.log("Time up");
      document.getElementById("timer").innerHTML = "Time Up!";
    }
  }, 1000);


  console.log("timer stopped t = " + t);
}

<html>

<head>

  <script src=timer.js></script>

</head>

<body>


  <input type=Reset onclick=timer()> <br>

  <hi id="timer"></hi> <br>

</body>

</html>

Answer 3

每次单击重置按钮，都会创建一个新间隔。这就是为什么当您单击重置按钮时，控制台输出会变得更混乱。

setInterval 函数返回创建的间隔的ID，您可以将其存储在诸如 window.timerInterval 之类的全局变量中。

在计时器函数中，先运行 clearInterval（window.timerInterval）。因此，如果在 window.timerInterval 中创建并存储了任何间隔，则 clearInterval（window.timerInterval）请确保首先停止运行它。

检查并运行以下工作示例：

function timer() {
  var t = 3;

  console.log("timer started t = " + t);

  clearInterval(window.timerInterval);

  window.timerInterval = setInterval(function() {
    if (t >= 0) {
      document.getElementById("timer").innerHTML = t;
      console.log(t);
      t--;
    } else {
      document.getElementById("timer").innerHTML = "Time Up!";
    }
  }, 1000);


  console.log("timer stopped t = " + t);
}

<html>

<head>

  <script src=timer.js></script>

</head>

<body>


  <input type=Reset onclick=timer()> <br>

  <hi id="timer"></hi> <br>

</body>

</html>

Answer 4

SetInterval以指定的时间间隔重复执行操作。

您应该使用setTimeOut。

 var timerConst; 
 function timer() {

 if(timerConst) clearTimeOut( timerConst); // this will clear the previous timeout.

  timerConst = setTimeOut(function() {
    console.log("Time up");
    document.getElementById("timer").innerHTML = "Time Up!";
   }, 3000);}

这将在3秒后显示一个文本。

https://www.w3schools.com/jsref/met_win_settimeout.asp

为什么计时器无法正常工作？

4 个答案: