JavaScript
Intervalos y tiempos de espera

Sintaxis

• timeoutID = setTimeout (function () {}, milisegundos)
• intervalID = setInterval (function () {}, milisegundos)
• timeoutID = setTimeout (function () {}, milisegundos, parámetro, parámetro, ...)
• intervalID = setInterval (function () {}, milisegundos, parámetro, parámetro, ...)
• clearTimeout (timeoutID)
• clearInterval (intervalID)

Observaciones

Intervalos

function waitFunc(){
    console.log("This will be logged every 5 seconds");
}

window.setInterval(waitFunc,5000);

Quitando intervalos

window.setInterval() devuelve un IntervalID , que se puede usar para detener la ejecución de ese intervalo. Para hacer esto, almacene el valor de retorno de window.setInterval() en una variable y llame a clearInterval() con esa variable como el único argumento:

function waitFunc(){
    console.log("This will be logged every 5 seconds");
}    

var interval = window.setInterval(waitFunc,5000);

window.setTimeout(function(){
    clearInterval(interval);
},32000);

Esto se registrará This will be logged every 5 seconds cada 5 segundos, pero lo detendrá después de 32 segundos. Así se registrará el mensaje 6 veces.

Eliminando tiempos de espera

window.setTimout() devuelve un TimeoutID , que se puede usar para detener el tiempo de espera. Para hacer esto, almacene el valor de retorno de window.setTimeout() en una variable y llame a clearTimeout() con esa variable como el único argumento:

function waitFunc(){
    console.log("This will not be logged after 5 seconds");
}
function stopFunc(){
    clearTimeout(timeout);
}

var timeout = window.setTimeout(waitFunc,5000);
window.setTimeout(stopFunc,3000);

Esto no registrará el mensaje porque el temporizador se detiene después de 3 segundos.

SetTimeout recursivo

Para repetir una función indefinidamente, se puede llamar a setTimeout forma recursiva:

function repeatingFunc() {
    console.log("It's been 5 seconds. Execute the function again.");
    setTimeout(repeatingFunc, 5000);
}

setTimeout(repeatingFunc, 5000);

A diferencia de setInterval , esto asegura que la función se ejecutará incluso si el tiempo de ejecución de la función es mayor que el retardo especificado. Sin embargo, no garantiza un intervalo regular entre las ejecuciones de funciones. Este comportamiento también varía porque una excepción antes de la llamada recursiva a setTimeout evitará que se repita, mientras que setInterval se repetirá indefinidamente, independientemente de las excepciones.

setTimeout, orden de operaciones, clearTimeout

setTimeout

• Ejecuta una función, después de esperar un número específico de milisegundos.
• Se utiliza para retrasar la ejecución de una función.

Sintaxis: setTimeout(function, milliseconds) o window.setTimeout(function, milliseconds)

Ejemplo: Este ejemplo muestra "hola" en la consola después de 1 segundo. El segundo parámetro es en milisegundos, entonces 1000 = 1 segundo, 250 = 0.25 segundos, etc.

setTimeout(function() {
    console.log('hello');
}, 1000);

Problemas con setTimeout

Si está utilizando el método setTimeout en un bucle for :

for (i = 0; i < 3; ++i) {
  setTimeout(function(){
    console.log(i);
  }, 500);
}

Esto generará el valor 3 three veces, lo cual no es correcto.

Solución de este problema:

for (i = 0; i < 3; ++i) {
  setTimeout(function(j){
    console.log(i);
  }(i), 1000);
}

Se emitirá el valor 0 , 1 , 2 . Aquí, estamos pasando la i a la función como un parámetro ( j ).

Orden de operaciones

Sin embargo, además, debido a que Javascript es un solo hilo y utiliza un bucle de eventos global, setTimeout puede usarse para agregar un elemento al final de la cola de ejecución llamando a setTimeout con cero retraso. Por ejemplo:

setTimeout(function() {
    console.log('world');
}, 0);

console.log('hello');

En realidad será la salida:

hello
world

Además, cero milisegundos aquí no significa que la función dentro del setTimeout se ejecutará inmediatamente. Tomará un poco más que eso dependiendo de los elementos que se ejecutarán en la cola de ejecución. Este se acaba de empujar hasta el final de la cola.

Cancelando un timeout

clearTimeout (): detiene la ejecución de la función especificada en setTimeout()

Sintaxis: clearTimeout (timeoutVariable) o window.clearTimeout (timeoutVariable)

Ejemplo:

var timeout = setTimeout(function() {
    console.log('hello');
}, 1000);

clearTimeout(timeout); // The timeout will no longer be executed

Intervalos

Estándar

No necesita crear la variable, pero es una buena práctica, ya que puede usar esa variable con clearInterval para detener el intervalo actual.

var int = setInterval("doSomething()", 5000 ); /* 5 seconds */
var int = setInterval(doSomething, 5000 ); /* same thing, no quotes, no parens */

Si necesita pasar parámetros a la función doSomething, puede pasarlos como parámetros adicionales más allá de los dos primeros para setInterval.

Sin superposición

setInterval, como el anterior, se ejecutará cada 5 segundos (o lo que sea que configures) sin importar qué. Incluso si la función doSomething tarda más de 5 segundos en ejecutarse. Eso puede crear problemas. Si solo quiere asegurarse de que haya una pausa entre las corridas de doSomething, puede hacer esto:

(function(){

   doSomething();

   setTimeout(arguments.callee, 5000);

})()