AngularJS $timeout 和 $interval
AngularJS有两个计时器服务,$ timeout和$ interval,我们可以使用它们来调用应用程序中的函数。 $ timeout和$ interval服务的功能类似于JavaScript的setTimeout()和setInterval()函数(实际上属于window对象)。这些服务的功能也很相似,因此我将在本文中介绍两者。
$timeout
给定的时间延迟后,$ timeout服务可用于调用另一个JavaScript函数。 $ timeout服务仅安排一次对该函数的调用。要重复调用一个函数,请参见本文后面的$ interval。
注入$ timeout
要使用$ timeout服务,我们必须首先将其注入到控制器函数中。这是将$ timeout服务注入控制器函数的示例:
var myapp = angular.module("myapp", []);
myapp.controller("MyController", function($scope, $timeout){
});
注意控制器功能的$ timeout参数。就像我们要在控制器函数中使用的任何其他AngularJS服务一样,AngularJS会将$ timeout服务注入该参数。
安排函数调用
一旦$ timeout服务被注入到控制器函数中,我们就可以使用它来调度函数调用。这是一个使用$ timeout服务安排3秒后的函数调用的示例:
var myapp = angular.module("myapp", []);
myapp.controller("MyController", function($scope, $timeout){
$timeout(callAtTimeout, 3000);
});
function callAtTimeout() {
console.log("Timeout occurred");
}
此示例将3秒(3000毫秒)后的函数调用安排在callAtTimeout()中。
如果要在$ scope对象上调用函数,可以这样:
var myapp = angular.module("myapp", []);
myapp.controller("DIController", function($scope, $timeout){
$scope.callAtTimeout = function() {
console.log("$scope.callAtTimeout - Timeout occurred");
}
$timeout( function(){ $scope.callAtTimeout(); }, 3000);
});
注意传递给$ timeout服务的函数。这个函数调用$ scope对象上的callAtTimeout()函数。
$interval
$ interval服务的功能与$ timeout服务的功能相似,不同之处在于它安排了一个函数,以便在两个时间间隔之间重复执行。
注入$ interval
要使用$ interval服务,我们必须将其注入控制器函数中。这是一个将$ interval服务注入控制器函数的示例:
var myapp = angular.module("myapp", []);
myapp.controller("MyController", function($scope, $interval){
});
如我们所见,它与在AngularJS中注入任何其他服务的方式非常相似。
安排重复的函数调用
一旦将" $ interval"服务注入到控制器函数中,我们就可以使用它来安排重复的函数调用。这是一个使用$ interval服务每5秒安排一次函数调用的示例:
var myapp = angular.module("myapp", []);
myapp.controller("MyController", function($scope, $interval){
$interval(callAtInterval, 5000);
});
function callAtInterval() {
console.log("Interval occurred");
}
本示例每5秒钟(5000毫秒)安排一次对callAtInterval()的函数调用。
如果我们想在$ scope对象上调用函数,可以这样:
var myapp = angular.module("myapp", []);
myapp.controller("DIController", function($scope, $interval){
$scope.callAtInterval = function() {
console.log("$scope.callAtInterval - Interval occurred");
}
$interval( function(){ $scope.callAtInterval(); }, 3000);
});
传递给$ interval服务的函数调用$ scope对象上的callAtInterval()函数。
计划函数调用后执行$ digest()
如果我们计划执行的函数对$ scope对象中的变量进行了更改,或者对应用程序正在监视的任何其他变量进行了更改,则应用程序需要在计划函数之后执行$ scope。$ digest()通话结束。在我的有关$ watch(),$ digest()和$ apply()的教程中解释了为什么这样做是必要的。
默认情况下,AngularJS在计划的函数调用完成后已经调用了$ digest(),因此我们不必显式地执行该操作。但是,我们可以指定在计划的函数调用之后AngularJS是否不应调用$ digest()。例如,如果我们调度的函数调用仅更新动画,但不更改任何$ scope变量,则在函数完成后调用$ digest()会浪费CPU时间。
$ timeout和$ interval都有第三个可选参数,可以指定在计划函数完成后是否执行$ digest()方法。实际上,第三个参数指定是否应在$ apply()调用内完成对调度函数的调用。这是如何使用第三个参数的示例:
$interval( function(){ $scope.callAtInterval(); }, 3000, true);
$interval( function(){ $scope.callAtInterval(); }, 3000, false);
这两个$ interval例子都有第三个参数传递给$ interval服务。这个参数可以是" true"或者" false"。值为true表示应该在$ apply()调用内调用调度函数。值为false表示不应在$ apply()调用内调用它(意味着在计划函数完成后将不会调用$ digest())。

