clearInterval() non funziona

Eventuali duplicati:
JS - How to clear interval after using setInterval()clearInterval() non funziona

Ho una funzione che cambia il font-family di un testo ogni 500 ms utilizzando setInterval (ho fatto solo per praticare JavaScript .) La funzione viene richiamata facendo clic su un pulsante "on" e l'intervallo deve essere cancellato utilizzando un pulsante separato, "off". Tuttavia, il pulsante "off" in realtà non cancella l'intervallo, continua semplicemente. Sospetto che questo abbia qualcosa a che fare con lo scope ma non sono sicuro di come scriverlo in un altro modo. Inoltre, non voglio farlo con jQuery perché, dopo tutto, lo sto facendo per imparare.

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

fonte

2013-02-02 Matt Sanchez

Scopri come 'clearInterval' funziona effettivamente leggendo alcuni documenti: https://developer.mozilla.org/en-US/docs/DOM/window.clearInterval. –

Ho dato un'occhiata alle specifiche MDN prima, ma non mi ha aiutato con il problema. –

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

setInterval restituisce un ID che quindi si utilizza per cancellare l'intervallo .

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

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

fonte

2013-02-02 21:56:41

questo va bene, ma si incontrerà un altro problema se si utilizza setInterval() (o setTimeout()) in una situazione in cui è possibile eseguirlo più volte. Se clicchi due volte, non cancellerai mai il primo setInterval(). O hai bisogno se (intervalId! == undefined) {intervalId = setInterval (... o fai intervalloId una matrice se vuoi più setIntervals su ogni clic aggiuntivo – papo

Il metodo setInterval restituisce un ID intervallo che è necessario passare a clearInterval al fine di cancellare l'intervallo. Stai passando una funzione, che non funzionerà. Ecco un esempio di un setInterval/clearInterval

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

fonte

2013-02-02 21:56:20

La funzione lavora setInterval restituisce un valore intero, che è l'id della "istanza Timer" che hai creato.

è questo valore intero che è necessario passare ad clearInterval

es:

var timerID = setInterval(fontChange,500);

e successivamente

clearInterval(timerID);

fonte

2013-02-02 21:56:23

Penso che si dovrebbe fare:

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

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

fonte

2013-02-02 21:57:18

State usando clearInterval in modo non corretto.

Questo è l'uso corretto:

impostare il timer con

var_name = setInterval(fontChange, 500);

e poi

clearInterval(var_name);

fonte

2013-02-02 21:58:52 Lrdwhyt

Ci sono errori nelle vostre funzioni, ma la prima cosa da fare, è per impostare correttamente il tag del corpo:

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

Il problema qualche volta può essere, che si chiami 'var text' e gli altri vars solo una volta, all'avvio dello script. Se si apportano modifiche al DOM, questa soluzione statica potrebbe essere dannosa.

Quindi si potrebbe provare questo (questo è l'approccio più flessibile e con i parametri di funzione, in modo da poter richiamare le funzioni su qualsiasi elemento):

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

Non hai bisogno di più questo, in modo da eliminarlo:

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

si tratta di codice dinamico, vale a dire il codice JS che corre generico e non fa gli elementi indirizzo direttamente. Mi piace questo approccio più che definire una funzione per ogni elemento div. ;)

fonte

2013-02-03 00:53:58 Marcus

clearInterval() non funziona

risposta

Problemi correlati