AngularJS 是一款流行的前端框架，它提供了许多强大的工具来简化开发过程。其中 $timeout 和 $interval 是两个非常有用的工具，它们可以帮助我们实现定时器、延迟执行等功能。本文将详细介绍 $timeout 和 $interval 的用法和特点，以及它们在实际开发中的应用。
$timeout
$timeout 是 AngularJS 提供的一个定时器服务，它可以延迟一段时间后执行一个函数。具体用法如下：
$timeout(function() { // 在这里编写要执行的代码 }, delayInMilliseconds);
其中第一个参数是要执行的函数，第二个参数是延迟的时间，单位是毫秒。例如，下面的代码会在 1 秒后弹出一个提示框：
$timeout(function() { alert('1 秒后弹出提示框'); }, 1000);
$timeout 还可以返回一个 promise 对象，可以用于在定时器执行完成后执行一些操作。例如：
$timeout(function() { // 在这里编写要执行的代码 }, delayInMilliseconds).then(function() { // 在这里编写要在定时器执行完成后执行的代码 });
在实际开发中，$timeout 常用于实现一些需要延迟执行的操作，比如提示框、动画等。
$interval
$interval 是 AngularJS 提供的一个定时器服务，它可以每隔一段时间执行一个函数。具体用法如下：
$interval(function() { // 在这里编写要执行的代码 }, delayInMilliseconds);
其中第一个参数是要执行的函数，第二个参数是间隔的时间，单位是毫秒。例如，下面的代码会每隔 1 秒弹出一个提示框：
$interval(function() { alert('每隔 1 秒弹出提示框'); }, 1000);
$interval 还可以返回一个 promise 对象，可以用于在定时器执行完成后执行一些操作。例如：
$interval(function() { // 在这里编写要执行的代码 }, delayInMilliseconds).then(function() { // 在这里编写要在定时器执行完成后执行的代码 });
在实际开发中，$interval 常用于实现一些需要定时执行的操作，比如轮播图、自动刷新等。
注意事项
在使用 $timeout 和 $interval 时，需要注意以下几点：
在使用 $timeout 和 $interval 时，需要将其注入到控制器或服务中，例如：
angular.module('myApp', []) .controller('myCtrl', function($scope, $timeout, $interval) { // 在这里使用 $timeout 和 $interval });
在使用 $timeout 和 $interval 时，需要在控制器或服务销毁时清除定时器，以避免内存泄漏。可以使用 $scope.$on('$destroy', function() {}) 来清除定时器，例如：
$scope.$on('$destroy', function() { $timeout.cancel(timer); $interval.cancel(interval); });
在使用 $interval 时，需要注意间隔时间是否合理，以避免对性能产生影响。
示例代码
下面是一个使用 $timeout 和 $interval 实现的简单的倒计时示例：
-- -------------------- ---- ------- ----------------------- --- --------------------- ---------------- --------- ---------- - ---------------- - --- --- ----- - ------------------- - ------------------- -- ----------------- - -- - ----- - -------------------------- ------ - -- ------ ---------------------- ---------- - ----------------------- --------------------------- --- ---展开代码
HTML 代码如下：
<div ng-app="myApp" ng-controller="myCtrl"> <h1>倒计时：{{countdown}}</h1> </div>
该示例会在页面加载后开始一个 10 秒的倒计时，并每隔 1 秒更新一次页面上的倒计时数字。在倒计时结束后，定时器会自动清除。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cba02fe46428fe9e497964
