AngularJS 中的 SetInterval

Rana Hasnain Khan 2022年6月2日
AngularJS 中的 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 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