javascript - not - stop setinterval
clearInterval() no funciona (6)
Posible duplicado:
JS - Cómo borrar el intervalo después de usar setInterval ()
Tengo una función que cambia la font-family de font-family de un texto cada 500 ms usando setInterval (lo hice solo para practicar JavaScript). Se llama a la función haciendo clic en el botón "on" y se supone que el intervalo se borra usando una botón separado, "off". Sin embargo, el botón "off" no borra realmente el intervalo, simplemente continúa. Sospecho que esto tiene algo que ver con el alcance, pero no estoy seguro de cómo escribirlo de otra manera. Además, no quiero hacer esto con jQuery porque, después de todo, lo estoy haciendo para aprender.
<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>
Creo que deberías hacer:
var myInterval
on.onclick = function() {
myInterval=setInterval(fontChange, 500);
};
off.onclick = function() {
clearInterval(myInterval);
};
El método setInterval devuelve un ID de intervalo que debe pasar a clearInterval para borrar el intervalo. Estás pasando una función, que no funcionará. Aquí hay un ejemplo de un setInterval / clearInterval que funciona
var interval_id = setInterval(myMethod,500);
clearInterval(interval_id);
Estás utilizando clearInterval incorrectamente.
Este es el uso adecuado:
Ajuste el temporizador con
var_name = setInterval(fontChange, 500);
y entonces
clearInterval(var_name);
Hay errores en sus funciones, pero lo primero que debe hacer es establecer la etiqueta del cuerpo correctamente:
<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>
El problema puede ser a veces, que se llama ''var text'' y las otras vars solo una vez, cuando se inicia el script. Si realiza cambios en el DOM, esta solución estática puede ser dañina.
Así que puedes intentar esto (este es un enfoque más flexible y usar parámetros de función, para que puedas llamar a las funciones en cualquier 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>
Ya no necesitas esto, así que bórralo:
var text = document.getElementById("go");
var on = document.getElementById("on");
var off = document.getElementById("off");
Este es un código dinámico, es decir, el código JS que se ejecuta de forma genérica y no aborda los elementos directamente. Me gusta este enfoque más que definir una función propia para cada elemento div. ;)
La función setInterval devuelve un valor entero, que es el id de la "instancia del temporizador" que ha creado.
Es este valor entero que debe pasar a clearInterval
p.ej:
var timerID = setInterval(fontChange,500);
y después
clearInterval(timerID);
setInterval devuelve una ID que luego usas para borrar el intervalo.
var intervalId;
on.onclick = function() {
if (intervalId) {
clearInterval(intervalId);
}
intervalId = setInterval(fontChange, 500);
};
off.onclick = function() {
clearInterval(intervalId);
};