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())。