AngularJS 中的 SetInterval

当前位置：主页 > 学无止境 > WEB前端 > Angular >

Vue React JavaScript Angular CSS HTML

AngularJS 中的 SetInterval

作者：迹忆客最近更新：2023/03/13 浏览次数：

本文将通过示例介绍 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>