Angular 中的 setTimeout() 函式

Rana Hasnain Khan 2023年1月30日 2021年12月20日

Angular Angular Function

Angular 中的 setTimeout() 函式使用 IIFE 和函式遞迴
在 Angular 中 setTimeout() 函式通過傳遞值列表

我們將使用立即呼叫函式表示式 (IIFE) 和函式遞迴來介紹 Angular 的 setTimeout() 函式。我們還將通過傳遞我們想要等待的時間列表並遞迴迭代它們來介紹 Angular 的 setTimeout() 函式。

Angular 中的 `setTimeout()` 函式使用 IIFE 和函式遞迴

我們可以出於各種原因使用 setTimeout() 函式。最好允許 Angular 在我們將同步執行的操作之間執行一次更改檢測。

setTimeout() 是一個原生 JavaScript 函式，它設定一個計時器來執行回撥函式，一旦計時器完成就呼叫該函式。

一個簡單的 setTimeout() 函式示例：

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

輸出：

Angular 中使用 IIFE 和函式遞迴的 setTimeout 函式

在上面的程式碼塊中，我們定義了一個整數 i 和 max 並使用了一個重複函式來重複我們的超時，直到滿足條件。

如果 i 值大於 max，此迴圈將中斷。如果 i 的值仍然低於 max 值，它將每 1 秒重複一次並列印 waited for: 1 to 5 seconds。

在 Angular 中 `setTimeout()` 函式通過傳遞值列表

如果我們有一個值列表，我們希望我們的程式等待並執行回撥函式，我們可以將我們的函式設定為傳遞一個陣列作為引數並執行直到陣列完成。

示例程式碼：

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

輸出：

setTimeout 函式通過在 Angular 中傳遞值列表

Author: Rana Hasnain Khan

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.

Angular 中的 setTimeout() 函式使用 IIFE 和函式遞迴

在 Angular 中 setTimeout() 函式通過傳遞值列表

相關文章 - Angular Function

Angular 中的 `setTimeout()` 函式使用 IIFE 和函式遞迴

在 Angular 中 `setTimeout()` 函式通過傳遞值列表