AngularJS $timeout 和 $interval

时间:2020-01-09 10:34:02  来源:igfitidea点击:

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