Question

所以，我使用附加到onClick的setInterval在这个函数中有一个无限循环。问题是，我无法在onClick中使用clearInterval来阻止它。我认为这是因为当我将一个clearInterval附加到onClick时，它会杀死一个特定的间隔，而不是该函数。我可以通过onClick 杀死所有间隔吗？

这是我的.js file以及我正在进行的调用

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。那就是你可以在函数中使用一点逻辑来防止它很容易地运行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

Live demo

这就是你所需要的！

<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>

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

4 个答案: