javascript - stop - settimeout not working
¿Cuántos javascript setTimeout/setInterval call pueden configurarse simultáneamente en una página? (4)
En una página puede tener tantos setTimeouts / setIntervals ejecutándose a la vez como desee, sin embargo, para controlar cada uno individualmente, deberá asignarlos a una variable.
var interval_1 = setInterval("callFunc1();",2000);
var interval_2 = setInterval("callFunc2();",1000);
clearInterval(interval_1);
El mismo código anterior se aplica a setTimeout, simplemente reemplazando la redacción.
Como Kevin ha declarado, JavaScript es en realidad un solo hilo, por lo que si bien puede tener varios temporizadores marcando a la vez, solo uno puede disparar a la vez, es decir, si tiene uno que dispara una función que ''se detiene'' en ejecución, por ejemplo con un cuadro de alerta, entonces ese JS debe ''reanudarse'' antes de que otro pueda disparar, creo.
Un ejemplo adicional se da a continuación. Si bien el marcado no es válido, muestra cómo funcionan los tiempos de espera.
<html>
<body>
<script type="text/javascript">
function addThing(){
var newEle = document.createElement("div");
newEle.innerHTML = "Timer1 Tick";
document.body.appendChild(newEle);
}
var t1= setInterval("addThing();",1000);
var t2 = setInterval("alert(''moo'');",2000);
</script>
</body>
</html>
Tengo que usar al menos 2 setTimeouts y 1 setInterval. ¿Tiene esto alguna dependencia del navegador o del motor javascript que se utiliza?
Puedes usar tantos como quieras. Solo recuerda que JavaScript es un solo hilo, por lo que ninguno de ellos puede ejecutarse en paralelo.
tl; dr: No te preocupes por el costo de los temporizadores hasta que estés creando 100K de ellos.
Acabo de hacer una prueba rápida del rendimiento del temporizador creando este archivo de prueba (crea temporizadores de 100K una y otra vez):
<script>
var n = 0; // Counter used to verify all timers fire
function makeTimers() {
var start = Date.now();
for (var i = 0; i < 100000; i++, n++) {
setTimeout(hello, 5000);
}
console.log(''Timers made in'', Date.now() - start, ''msecs'');
}
function hello() {
if (--n == 0) {
console.log(''All timers fired'');
makeTimers(); // Do it again!
}
}
setTimeout(makeTimers, 10000); // Wait a bit before starting test
</script>
Abrí este archivo en Google Chrome (v54) en mi circa ~ 2014 Macbook Pro, fui a la pestaña Línea de tiempo en Herramientas de desarrollo y registré el perfil de memoria a medida que se cargaba la página y realizaba 3-4 ciclos de la prueba.
Observaciones
El bucle de creación del temporizador toma 200ms. El tamaño del montón de páginas comienza en la prueba previa de 3.5MB y se nivela en 3.9MB.
Conclusión
Cada temporizador toma ~ .002 msegs para configurar, y agrega unos 35 bytes al montón JS.
var interval_1 = setInterval("callFunc1();",2000); llama a eval() que es malo por lo que es MALO. Use esto en su lugar var interval_1 = setInterval(callFunc1,2000);
Y para la pregunta, puedes usar tantas como quieras, pero si todas tienen el mismo intervalo entre dos acciones, es mejor que lo hagas de esta manera.
var interval = setInterval(function() {
// function1
fct1();
// function2
fct2();
},2000);