Javascript clearInterval() 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14666924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
clearInterval() not working
提问by Matt Sanchez
Possible Duplicate:
JS - How to clear interval after using setInterval()
I have a function that changes the font-familyof some text every 500 ms using setInterval(I made it just to practice JavaScript.) The function is called by clicking on an "on" button and the interval is supposed to be cleared using a separate button, "off". However, the "off" button doesn't actually clear the interval, it just continues. I suspect that this has something to do with scope but I'm not sure how to write it any other way. Also, I don't want to do this with jQuery because, after all, I'm doing it to learn.
我有一个函数，它font-family每 500 毫秒使用一次setInterval（我只是为了练习 JavaScript）更改某个文本的离开”。但是，“关闭”按钮实际上并没有清除间隔，它只是继续。我怀疑这与范围有关，但我不确定如何以其他方式编写它。另外，我不想用 jQuery 来做这件事，因为毕竟，我这样做是为了学习。
<body>
<p><span id="go" class="georgia">go</span> Italian</p>
<p>
<button id="on" type="button" value="turn on">turn on</button>
<button id="off" type="button" value="turn off">turn off</button>
</p>
<script>
var text = document.getElementById("go");
var on = document.getElementById("on");
var off = document.getElementById("off");
var fontChange = function() {
switch(text.className) {
case "georgia":
text.className = "arial";
break;
case "arial":
text.className = "courierNew";
break;
case "courierNew":
text.className = "georgia";
break;
}
};
on.onclick = function() {
setInterval(fontChange, 500);
};
off.onclick = function() {
clearInterval(fontChange);
};
</script>
</body>
回答by Konstantin Dinev
setIntervalreturns an ID which you then use to clear the interval.
setInterval返回一个 ID，然后您可以使用它来清除间隔。
var intervalId;
on.onclick = function() {
if (intervalId) {
clearInterval(intervalId);
}
intervalId = setInterval(fontChange, 500);
};
off.onclick = function() {
clearInterval(intervalId);
};
回答by Jon Egerton
The setIntervalfunction returns an integer value, which is the id of the "timer instance" that you've created.
该setInterval函数返回一个整数值，它是您创建的“计时器实例”的 id。
It is this integer value that you need to pass to clearInterval
这是您需要传递给的整数值 clearInterval
e.g:
例如：
var timerID = setInterval(fontChange,500);
and later
然后
clearInterval(timerID);
回答by Lrdwhyt
You're using clearInterval incorrectly.
您错误地使用了 clearInterval 。
This is the proper use:
这是正确的用法：
Set the timer with
设置定时器
var_name = setInterval(fontChange, 500);
and then
进而
clearInterval(var_name);
回答by Paul Kehrer
The setIntervalmethod returns an interval ID that you need to pass to clearIntervalin order to clear the interval. You're passing a function, which won't work. Here's an example of a working setInterval/clearInterval
所述的setInterval方法返回一个间隔ID，你需要传递给clearInterval以明确的时间间隔。您正在传递一个不起作用的函数。这是一个工作 setInterval/clearInterval 的例子
var interval_id = setInterval(myMethod,500);
clearInterval(interval_id);
回答by Lorenzo Medeot
i think you should do:
我认为你应该这样做：
var myInterval
on.onclick = function() {
myInterval=setInterval(fontChange, 500);
};
off.onclick = function() {
clearInterval(myInterval);
};
回答by Marcus
There are errors in your functions, but the first thing you should do, is to set the body tag correctly:
您的函数中存在错误，但您应该做的第一件事是正确设置 body 标签：
<body>
<p><span id="go" class="georgia">go</span> Italian</p>
<p>
<button id="on" type="button" value="turn on">turn on</button>
<button id="off" type="button" value="turn off">turn off</button>
</p>
</body>
<script>....</script>
The problem sometimes may be, that you call 'var text' and the other vars only once, when the script starts. If you make changements to the DOM, this static solution may be harmful.
问题有时可能是，当脚本启动时，您只调用 'var text' 和其他变量一次。如果您对 DOM 进行更改，则此静态解决方案可能有害。
So you could try this (this is more flexible approach and using function parameters, so you can call the functions on anyelement):
所以你可以试试这个（这是更灵活的方法和使用函数参数，所以你可以在任何元素上调用函数）：
<body>
<p><span id="go" class="georgia">go</span> Italian</p>
<p>
<button type="button" value="turn on"
onclick=turnOn("go")>turn on</button>
<button type="button" value="turn off"
onclick=turnOff()>turn off</button>
</p>
</body>
<script type="text/JavaScript">
var interval;
var turnOn = function(elementId){
interval = setInterval(function(){fontChange(elementId);}, 500);
};
var turnOff = function(){
clearInterval(interval);
};
var fontChange = function(elementId) {
var text = document.getElementById(elementId);
switch(text.className) {
case "georgia":
text.className = "arial";
break;
case "arial":
text.className = "courierNew";
break;
case "courierNew":
text.className = "georgia";
break;
}
};
</script>
You don't need this anymore, so delete it:
你不再需要这个，所以删除它：
var text = document.getElementById("go");
var on = document.getElementById("on");
var off = document.getElementById("off");
This is dynamic code, meaning JS code which runs generic and doesn't adress elements directly. I like this approach more than defining an own function for every div element. ;)
这是动态代码，意思是运行通用且不直接处理元素的 JS 代码。我喜欢这种方法，而不是为每个 div 元素定义一个自己的函数。;)
