La fonction setTimeout() dans Angular

Rana Hasnain Khan 30 janvier 2023
  1. Fonction setTimeout() dans Angular utilisant IIFE et la récursivité de fonction
  2. Fonction setTimeout() en passant la liste de valeurs en Angular
La fonction setTimeout() dans Angular

Nous présenterons la fonction setTimeout() d’Angular utilisant l’expression de fonction immédiatement invoquée (IIFE) et la récursivité de fonction. Nous présenterons également la fonction setTimeout() d’Angular en passant une liste de temps que nous voulons attendre et en les itérant de manière récursive.

Fonction setTimeout() dans Angular utilisant IIFE et la récursivité de fonction

Nous pouvons utiliser la fonction setTimeout() pour diverses raisons. Il est préférable de permettre à Angular d’exécuter la détection de changement une fois, entre les actions que nous effectuerions autrement de manière synchrone.

setTimeout() est une fonction JavaScript native qui définit une minuterie pour exécuter une fonction de rappel, appelant la fonction une fois la minuterie terminée.

Un exemple simple de fonction setTimeout() :

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

Production :

fonction setTimeout dans Angular à l’aide d’IIFE et de la récursivité des fonctions

Dans le bloc de code ci-dessus, nous avons défini un entier i et max et utilisé une fonction de répétition pour répéter notre délai d’attente jusqu’à ce que la condition soit remplie.

Si les valeurs i deviennent supérieures à max, cette boucle se rompra. Si la valeur de i reste sous la valeur max, elle se répétera toutes les 1s et imprimera waited for: 1 to 5 seconds.

Fonction setTimeout() en passant la liste de valeurs en Angular

Si nous avons une liste de valeurs pour lesquelles nous voulons que notre programme attende et exécute la fonction de rappel, nous pouvons définir notre fonction pour transmettre un tableau en tant que paramètre et s’exécuter jusqu’à ce que le tableau soit complet.

Exemple de code :

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);

Production :

fonction setTimeout en passant la liste des valeurs en Angular

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

Article connexe - Angular Function