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（）不工作

回答

相關問題