La función setTimeout() en Angular

Introduciremos la función setTimeout() de Angular usando la Expresión de Función Invocada Inmediatamente (IIFE) y la recursividad de la función. También presentaremos la función setTimeout() de Angular pasando una lista de las veces que queremos esperar e iterarlas de forma recursiva.

Función setTimeout() en Angular usando IIFE y recursividad de funciones

Podemos utilizar la función setTimeout() por varias razones. Es mejor permitir que Angular ejecute la detección de cambios una vez, entre las acciones que de otro modo realizaríamos sincrónicamente.

setTimeout() es una función de JavaScript nativa que establece un temporizador para ejecutar una función de devolución de llamada, llamando a la función una vez que el temporizador ha terminado.

Un simple ejemplo de función setTimeout():

let i = 0;
let max = 5;
(function repeat(){
  if (++i > 5) return;
  setTimeout(function(){
    console.log("waited for: " + i + " seconds");
    repeat();
  }, 1000);
})();

Producción:

En el bloque de código anterior, definimos un número entero i y max y usamos una función de repetición para repetir nuestro tiempo de espera hasta que se cumpla la condición.

Si los valores de i son mayores que max, este bucle se romperá. Si el valor de i permanece por debajo del valor max, se repetirá cada 1s e imprimirá waited for: 1 to 5 seconds.

setTimeout() Función al pasar la lista de valores en Angular

Si tenemos una lista de valores para los cuales queremos que nuestro programa espere y ejecute la función de devolución de llamada, podemos configurar nuestra función para que pase un array como parámetro y se ejecute hasta que el array esté completa.

Código de ejemplo:

let waitList = [5000, 4000, 3000, 1000];

function setDelay(times) {
  if (times.length > 0) {
    // Remove the first time from the array
    let wait = times.shift();
    console.log("Waiting For: " + wait/1000 + " seconds");
    
    // Wait for the given amount of time
    setTimeout(() => {
        console.log("Waited For: " + wait/1000 + " seconds");
        // Call the setDelay function again with the remaining times
        setDelay(times);
    }, wait);
  }
}

setDelay(waitList);

Producción: