javascript - 有没有办法通过 Onclick 按钮杀死 setInterval 循环

Question

因此，我使用附加到 onClick 的 setInterval 在此函数中进行了无限循环。问题是，我无法在 onClick 中使用 clearInterval 来阻止它。我认为这是因为当我将 clearInterval 附加到 onClick 时，它会杀死特定的时间间隔，而不是完全杀死函数。我能做些什么来通过 onClick杀死所有间隔吗？

这是我的.js 文件，我正在拨打的电话是

input type="button" value="generate" onClick="generation();

input type="button" value="Infinite Loop!" onclick="setInterval('generation()',1000);"

input type="button" value="Reset" onclick="clearInterval(generation(),80;" // This one here is giving me trouble.

Answer 1

setInterval 返回一个句柄，您需要该句柄以便清除它

最简单的，在你的 html 头中为句柄创建一个 var，然后在你的 onclick 中使用 var

// in the head
var intervalHandle = null;

// in the onclick to set
intervalHandle = setInterval(....

// in the onclick to clear
clearInterval(intervalHandle);

http://www.w3schools.com/jsref/met_win_clearinterval.asp

Answer 2

clearInterval应用于 的返回值setInterval，如下所示：

var interval = null;
theSecondButton.onclick = function() {
    if (interval === null) {
       interval = setInterval(generation, 1000);
    }
}
theThirdButton.onclick = function () {
   if (interval !== null) {
       clearInterval(interval);
       interval = null;
   }
}

Answer 3

调用generation();自身setTimeout而不是setInterval. 那就是你可以在函数中使用一些 if 逻辑来防止它setTimeout很容易运行。

var genTimer
var stopGen = 0

function generation() {
   clearTimeout(genTimer)  ///stop additional clicks from initiating more timers
   . . .
   if(!stopGen) {
       genTimer = setTimeout(function(){generation()},1000)
   }
}

}

Answer 4

现场演示

这就是你所需要的！

<script type="text/javascript">
var foo = setInterval(timer, 1000);
function timer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

$(document).on("click", "#stop_clock", function() {
  clearInterval(foo);
  $("#stop_clock").empty().append("Done!");
});
</script>