Die setTimeout()-Funktion in Angular

Rana Hasnain Khan 15 Februar 2024
  1. setTimeout() Funktion in Angular mit IIFE und Funktionsrekursion
  2. setTimeout() Funktion durch Übergabe einer Werteliste in Angular
Die setTimeout()-Funktion in Angular

Wir werden die Funktion setTimeout() von Angular vorstellen, die einen sofortigen Funktionsausdruck (IIFE) und eine Funktionsrekursion verwendet. Wir werden auch die Funktion setTimeout() von Angular einführen, indem wir eine Liste von Zeiten übergeben, die wir warten möchten, und sie rekursiv iterieren.

setTimeout() Funktion in Angular mit IIFE und Funktionsrekursion

Wir können die Funktion setTimeout() aus verschiedenen Gründen verwenden. Es ist am besten, Angular die Änderungserkennung einmal zwischen den Aktionen auszuführen, die wir sonst synchron ausführen würden.

setTimeout() ist eine native JavaScript-Funktion, die einen Timer setzt, um eine Callback-Funktion auszuführen und die Funktion aufruft, sobald der Timer abgelaufen ist.

Ein einfaches Funktionsbeispiel setTimeout():

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

Ausgabe:

setTimeout-Funktion in Angular mit IIFE und Funktionsrekursion

Im obigen Codeblock haben wir eine Ganzzahl i und max definiert und eine Wiederholungsfunktion verwendet, um unser Timeout zu wiederholen, bis die Bedingung erfüllt ist.

Wenn i-Werte größer als max werden, wird diese Schleife unterbrochen. Wenn der Wert von i unter dem max-Wert bleibt, wird er alle 1s wiederholt und waited for: 1 to 5 seconds gedruckt.

setTimeout() Funktion durch Übergabe einer Werteliste in Angular

Wenn wir eine Liste von Werten haben, auf die unser Programm warten und die Callback-Funktion ausführen soll, können wir unsere Funktion so einstellen, dass sie ein Array als Parameter übergibt und ausgeführt wird, bis das Array vollständig ist.

Beispielcode:

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

Ausgabe:

setTimeout-Funktion durch Übergabe einer Werteliste in 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

Verwandter Artikel - Angular Function