Fatal编程技术网
  • javascript/
  • Javascript clearInterval（）不工作

Javascript clearInterval（）不工作

javascript

Javascript clearInterval（）不工作,javascript,scope,setinterval,clearinterval,Javascript,Scope,Setinterval,Clearinterval,可能重复： 我有一个函数，它使用setInterval（我只是为了练习JavaScript）每隔500毫秒更改一些文本的字体系列。该函数通过单击“开”按钮调用，间隔应该使用单独的按钮“关”清除。然而，“关闭”按钮实际上并没有清除间隔，它只是继续。我怀疑这与范围有关，但我不确定如何以其他方式编写它。另外，我不想用jQuery做这件事，因为毕竟，我这样做是为了学习 <body> <p><span id="go" class="georgia">go</sp

可能重复：

我有一个函数，它使用
setInterval
（我只是为了练习JavaScript）每隔500毫秒更改一些文本的
字体系列
。该函数通过单击“开”按钮调用，间隔应该使用单独的按钮“关”清除。然而，“关闭”按钮实际上并没有清除间隔，它只是继续。我怀疑这与范围有关，但我不确定如何以其他方式编写它。另外，我不想用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>


去意大利


打开
关掉


var text=document.getElementById（“go”）；
var on=document.getElementById（“on”）；
var off=document.getElementById（“off”）；
var fontChange=函数（）{
开关（text.className）{
“格鲁吉亚”案：
text.className=“arial”；
打破
“arial”一案：
text.className=“courierNew”；
打破
“courierNew”案：
text.className=“格鲁吉亚”；
打破
}
};
on.onclick=function（）{
设置间隔（fontChange，500）；
};
off.onclick=函数（）{
清除间隔（fontChange）；
};
该方法返回一个间隔ID，您需要将该ID传递给
clearInterval
，以清除该间隔。您正在传递一个函数，但该函数不起作用。下面是一个工作setInterval/clearInterval的示例

var interval_id = setInterval(myMethod,500);
clearInterval(interval_id);

setInterval
函数返回一个整数值，它是您创建的“计时器实例”的id

您需要传递给
clearInterval

e、 g:

后来

clearInterval(timerID);

setInterval
返回一个ID，然后使用该ID清除间隔

var intervalId;
on.onclick = function() {
    if (intervalId) {
        clearInterval(intervalId);
    }
    intervalId = setInterval(fontChange, 500);
};

off.onclick = function() {
    clearInterval(intervalId);
};
我认为你应该：

var myInterval
on.onclick = function() {
    myInterval=setInterval(fontChange, 500);
};

off.onclick = function() {
    clearInterval(myInterval);
};
您错误地使用了clearInterval

这是正确的用法：

将计时器设置为

var_name = setInterval(fontChange, 500);
然后

clearInterval(var_name);
函数中存在错误，但首先要正确设置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>
这是动态代码，意思是运行泛型而不直接寻址元素的JS代码。比起为每个div元素定义自己的函数，我更喜欢这种方法

我确实先看了MDN规范，但它没有帮助我解决这个问题。window.timer=setInterval（fontChange，500）；clearInterval（window.timer）这很好，但是如果在可以多次运行setInterval（）或setTimeout（）的情况下使用setInterval（），则会遇到另一个问题。如果单击两次，将永远无法清除第一个setInterval（）。您需要if（intervalId！==undefined）{intervalId=setInterval（…或使intervalId成为一个数组，如果您希望在每次额外的单击上有更多的setInterval 
<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>

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

var text = document.getElementById("go");
var on = document.getElementById("on");
var off = document.getElementById("off");