正在尝试停止函数上的Interval

Trying to stop Interval on a function

本文关键字：函数 Interval      更新时间：2023-09-26

我正在尝试创建一个按钮，单击该按钮将启动计时器，第二次单击将停止计时器，并将"button"的innerHtml更改为停止计时器的时间。然而，它不适用于我下面写的代码，Interval只是继续运行，它似乎每次单击都会创建多个Interval。

有什么想法吗？

var active = false;
var sec = 0;
function clock(){
    if(active === false) {
        var clock = setInterval("timer()", 1000);
        active = true;
    }
    else if(active === true){
        clearInterval(clock);
        document.getElementById("button").innerHTML = "You clicked at "+sec+" seconds, try again.";
        active = false;
        sec = 0;
    }
}
function timer() {
    sec++;
    document.getElementById("button").innerHTML = sec;
}

每次单击按钮时，var clock;的上下文不相同，下一次单击时该变量的上一个上下文将丢失，因此请像使用var active;一样将其全局化，并以不同于函数名的方式重命名，以避免出现问题：

js

var active = false;
var sec = 0, clck;
function clock() {
    if (active === false) {
        clck = setInterval("timer()", 1000);
        active = true;
    } else if (active === true) {
        clearInterval(clck);
        document.getElementById("button").innerHTML = "You clicked at " + sec + " seconds, try again.";
        active = false;
        sec = 0;
    }
}
function timer() {
    sec++;
    document.getElementById("button").innerHTML = sec;
}

html

<button id="button" onclick="clock()">Start Timer</button>

小提琴

您错过了点击事件处理程序和任何示例HTML，所以我已经实现了缺失的内容并提出了这个问题。

<!DOCTYPE html>
<html>
  <head>
   <script>
    var active = true;
    var sec = 0;
    var timer;
    function init() {
      var button = document.getElementById("button");
      button.addEventListener("click", function() {
        active = !active;
        if(active) {
          clearInterval(timer);
          button.innerHTML = "You clicked at " + sec + " seconds, try again!";  
          sec = 0;
        }
        else {
          timer = setInterval(function() {
            sec++;
            button.innerHTML = sec;
          }, 1000);
        }
      });
    }
  </script>
  </head>
  <body onload="init();">
    <span id="button">Start</span>
  </body>

相关文章：