clearInterval（）不工作

可能重复：
JS - How to clear interval after using setInterval()clearInterval（）不工作

我必须改变一些文字使用setInterval每500毫秒（我做它只是练习的JavaScript font-family功能。）通过单击“开”按钮调用该功能，间隔应该使用单独的按钮“关”来清除。然而，“关闭”按钮实际上并没有清除间隔，它只是继续。我怀疑这与范围有关，但我不知道如何以其他方式编写它。另外，我不想用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>

来源

2013-02-02 Matt Sanchez

请参阅https://developer.mozilla.org/en-US/docs/DOM/window.clearInterval以了解'clearInterval'的实际工作原理。 –

我确实先看过MDN规范，但它并没有帮助我解决问题。 –

window.timer = setInterval（fontChange，500）; clearInterval（window.timer） – Samiul

setInterval返回一个ID您然后使用以清除间隔。

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

off.onclick = function() { 
    clearInterval(intervalId); 
};

来源

2013-02-02 21:56:41

这很好，但如果您在可以多次运行它的情况下使用setInterval（）（或setTimeout（）），则会遇到另一个问题。如果你点击两次，你永远不会清除第一个setInterval（）。你可能需要if（intervalId！== undefined）{intervalId = setInterval（...或者让intervalId一个数组，如果你想在每个额外的点击上添加更多的setIntervals – papo

的setInterval方法返回需要传递到clearInterval为了清除间隔的间隔ID。你正在传递一个不起作用的函数。这里有一个工作的setInterval/clearInterval

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

来源

2013-02-02 21:56:20

的setInterval函数的例子返回一个整数值，这是你所创建的“计时器实例”的ID。

它是你需要传递给clearInterval

例如这个整数值：

var timerID = setInterval(fontChange,500);

后来

clearInterval(timerID);

来源

2013-02-02 21:56:23

，我认为你应该做的：

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

off.onclick = function() { 
    clearInterval(myInterval); 
};

来源

2013-02-02 21:57:18

您使用clearInterval不正确。

这是正确使用：

设置定时器

var_name = setInterval(fontChange, 500);

然后

clearInterval(var_name);

来源

2013-02-02 21:58:52 Lrdwhyt

有你的功能错误，但你应该做的第一件事，就是正确设置车身标签：

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

这个问题有时可能是，当脚本启动时，您只会调用'var text'和其他变量一次。如果您对DOM进行更改，则此静态解决方案可能有害。

所以，你可以试试这个（这是更灵活的方法和使用函数的参数，这样你就可以调用的函数上任何元素）：

<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");

这是动态的代码，意味着可直接通往普通，没有ADRESS元素JS代码。我喜欢这种方法，而不是为每个div元素定义一个自己的函数。 ;）

来源

2013-02-03 00:53:58 Marcus

clearInterval（）不工作

回答

相关问题