AngularJS 中的 SetInterval

Rana Hasnain Khan 2024年2月15日

Angular Angular SetInterval

本文將通過示例介紹 AngularJS 中的 setInterval()。

AngularJS 中的 `setInterval()`

在使用 Angular 開發大型生產應用程式時，我們需要為某些任務設定間隔。這些任務會在一段時間後自動處理一些重要資料。

例如，如果我們要對整個資料庫進行備份，我們可以將間隔時間設定為 24 小時，以便每隔 24 小時備份一次。

如果我們想在我們的應用程式上顯示最新的活動、帖子或通知，我們可以使用 AngularJS 應用程式中的 setInterval() 方法。這個方法有兩個引數。

第一個引數是將在每個間隔後執行的函式。第二個引數是以毫秒為單位的時間。

setInterval() 方法是一個以毫秒為單位指定間隔的函式。setInterval() 方法將在應用程式執行時繼續執行。

只有兩種方法可以停止 setInterval() 方法。我們可以關閉應用程式或使用另一種方法 clearInterval() 來結束 setInterval() 方法。

setInterval() 方法的語法如下所示。

newInterval = setInterval(function(), milliseconds);

如果我們想停止執行，我們必須使用 clearinterval() 方法。此方法的語法如下所示。

clearInterval(newInterval);

讓我們看一個例子，我們將在其中獲取當前時間並使用 setInterval() 方法每秒更新一次。此示例的程式碼如下所示。

<!DOCTYPE html>
<html>
<body>

<p id="timer"></p>

<script>
setInterval(newTimer, 1000);

function newTimer() {
  const newDate = new Date();
  document.getElementById("timer").innerHTML = newDate.toLocaleTimeString();
}
</script>

</body>
</html>

輸出：

angularjs 中的 setinterval 獲取時間示例

上面的例子表明時間每秒鐘更新一次。現在，如果我們想新增一個選項來隨時停止時間，我們可以使用 clearInterval() 方法。

讓我們通過相同的示例並在 clearInterval() 方法的幫助下新增一個停止時間的按鈕或 setInterval() 方法，如下所示。

<!DOCTYPE html>
<html>
<body>

<p id="timer"></p>

<button onclick="newStopFunc()">Stop Time By Clicking This Button</button>

<script>
const newInterval = setInterval(newTimer, 1000);

function newTimer() {
  const newDate = new Date();
  document.getElementById("timer").innerHTML = newDate.toLocaleTimeString();
}

function newStopFunc() {
  clearInterval(newInterval);
}
</script>

</body>
</html>

輸出：

angularjs 停止時間示例中的 setinterval

作者： 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.

AngularJS 中的 setInterval()

AngularJS 中的 `setInterval()`