clearInterval() nicht

Arbeits

Mögliche Duplizieren:
JS - How to clear interval after using setInterval()clearInterval() nicht

Ich habe eine Funktion, die die font-family einem Text wechselt alle 500 ms mit setInterval (ich es JavaScript gerade gemacht zu üben .) Die Funktion wird aufgerufen, indem auf einen "An" -Button geklickt wird und das Intervall mit einem separaten Button "Aus" gelöscht werden soll. Der "Aus" -Knopf löscht das Intervall jedoch nicht wirklich, es geht einfach weiter. Ich vermute, dass das etwas mit dem Oszilloskop zu tun hat, aber ich bin mir nicht sicher, wie ich es anders schreiben soll. Außerdem möchte ich das nicht mit jQuery machen, denn schließlich mache ich es, um zu lernen.

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

Quelle

2013-02-02 Matt Sanchez

Erfahren Sie, wie 'clearInterval' funktioniert, indem Sie eine Dokumentation lesen: https://developer.mozilla.org/en-US/docs/DOM/window.clearInterval. –

Ich habe mir zuerst die MDN-Spezifikation angeschaut, aber das hat mir nicht geholfen. –

window.timer = setInterval (fontChange, 500); clearInterval (window.timer) – Samiul

setInterval gibt eine ID, die Sie dann das Intervall löschen verwenden .

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

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

Quelle

2013-02-02 21:56:41

das ist in Ordnung, aber Sie werden ein anderes Problem auftreten, wenn Sie setInterval() (oder setTimeout()) in einer Situation verwenden, wo es möglich ist, es mehrmals auszuführen. Wenn Sie zweimal klicken, löschen Sie nie den ersten setInterval(). Sie benötigen entweder if (intervalId! == undefined) {intervalId = setInterval (...) oder make intervalId ein Array, wenn Sie bei jedem weiteren Klick weitere setIntervals wünschen – papo

Die setInterval Methode gibt ein Intervall-ID, die Sie clearInterval, um übergeben müssen das Intervall zu löschen. Sie übergeben eine Funktion, die nicht funktioniert. Hier ist ein Beispiel einer Arbeits setInterval/clearInterval

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

Quelle

2013-02-02 21:56:20

Der setInterval Funktion gibt einen Integer-Wert, der die ID der „Timer-Instanz“, die Sie erstellt haben.

Es ist dieser Integer-Wert, den Sie clearInterval

zB passieren müssen:

var timerID = setInterval(fontChange,500);

und später

clearInterval(timerID);

Quelle

2013-02-02 21:56:23

Ich glaube, Sie tun sollten:

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

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

Quelle

2013-02-02 21:57:18

Sie verwenden clearInterval falsch.

Dies ist der richtige Gebrauch:

den Timer mit

var_name = setInterval(fontChange, 500);

Set und dann

clearInterval(var_name);

Quelle

2013-02-02 21:58:52 Lrdwhyt

Es gibt Fehler in Funktionen, aber das erste, was Sie tun sollten, ist um das Body-Tag korrekt zu setzen:

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

Das Problem kann manchmal sein, dass Sie 'var text' und die anderen vars nur einmal aufrufen, wenn das Skript startet. Wenn Sie Änderungen am DOM vornehmen, kann diese statische Lösung schädlich sein.

So könnte man versuchen, dies (dieser flexibleren Ansatz und Funktionsparameter verwenden, so können Sie die Funktionen auf jedes Element nennen):

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

Sie müssen dies nicht mehr, so löschen:

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

Dies ist dynamischer Code, JS-Code verstanden werden, die generische läuft und nicht-mail-Elemente direkt. Ich mag diesen Ansatz mehr als eine eigene Funktion für jedes div-Element zu definieren. ;)

Quelle

2013-02-03 00:53:58 Marcus

Antwort

Verwandte Themen