Hay dos tipos (más utilizados) de función de temporizador en javascript setTimeout y setInterval (otro)
Ambos métodos tienen la misma firma. Toman una función de devolución de llamada y el tiempo de retardo como parámetro.
setTimeout se ejecuta solo una vez después del retraso, mientras que setInterval sigue llamando a la función de devolución de llamada después de cada milisegundos de demora.
Ambos métodos devuelven un identificador de número entero que se puede utilizar para borrarlos antes de que expire el temporizador.
clearTimeout y clearInterval ambos métodos toman un identificador entero devuelto por las funciones anteriores setTimeout y setInterval
Ejemplo:
setTimeout
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");
Si ejecuta el código anterior, verá que alerta before setTimeout y luego after setTimeout finalmente alerta I am setTimeout después de 1 segundo (1000 ms)
Lo que puede notar en el ejemplo es que el setTimeout(...) es asincrónico, lo que significa que no espera a que transcurra el temporizador antes de pasar a la siguiente declaración, es decir alert("after setTimeout");
Ejemplo:
setInterval
alert("before setInterval"); //called first
var tid = setInterval(function(){
//called 5 times each time after one second
//before getting cleared by below timeout.
alert("I am setInterval");
},1000); //delay is in milliseconds
alert("after setInterval"); //called second
setTimeout(function(){
clearInterval(tid); //clear above interval after 5 seconds
},5000);
Si ejecuta el código anterior, verá que alerta before setInterval y luego after setInterval finalmente alerta I am setInterval 5 veces después de 1 segundo (1000 ms) porque el setTimeout borra el temporizador después de 5 segundos o, de lo contrario, cada 1 segundo recibirá una alerta I am setInterval Infinitamente.
¿Cómo lo hace el navegador internamente?
Te lo explicaré brevemente.
Para entender eso, debe saber acerca de la cola de eventos en javascript. Hay una cola de eventos implementada en el navegador. Siempre que se activa un evento en js, todos estos eventos (como hacer clic, etc.) se agregan a esta cola. Cuando su navegador no tiene nada que ejecutar, toma un evento de la cola y los ejecuta uno por uno.
Ahora, cuando llamas setTimeout o setInterval su devolución de llamada se registra en un temporizador en el navegador y se agrega a la cola de eventos después de que expira el tiempo dado y, finalmente, JavaScript toma el evento de la cola y lo ejecuta.
Esto sucede así, porque los motores javascript son de un solo subproceso y solo pueden ejecutar una cosa a la vez. Por lo tanto, no pueden ejecutar otro javascript y realizar un seguimiento de su temporizador. Es por eso que estos temporizadores están registrados con el navegador (el navegador no es de un solo hilo) y puede realizar un seguimiento del temporizador y agregar un evento en la cola después de que expira el temporizador.
lo mismo sucede para setInterval solo en este caso, el evento se agrega a la cola una y otra vez después del intervalo especificado hasta que se borra o se actualiza la página del navegador.
Nota
El parámetro de retardo que pasa a estas funciones es el tiempo de retardo mínimo para ejecutar la devolución de llamada. Esto se debe a que después de que expira el temporizador, el navegador agrega el evento a la cola para que lo ejecute el motor javascript, pero la ejecución de la devolución de llamada depende de la posición de sus eventos en la cola y, como el motor es de un solo subproceso, ejecutará todos los eventos en la cola uno por uno.
Por lo tanto, su devolución de llamada en algún momento puede tardar más que el tiempo de retraso especificado para ser llamada especialmente cuando su otro código bloquea el hilo y no le da tiempo para procesar lo que hay en la cola.
Y como mencioné, javascript es un solo hilo. Entonces, si bloquea el hilo por mucho tiempo.
Como este código
while(true) { //infinite loop
}
Su usuario puede recibir un mensaje que diga La página no responde.