AngularJS(十七) 定时器

最新推荐文章于 2019-01-01 19:09:40 发布

houysx

最新推荐文章于 2019-01-01 19:09:40 发布

阅读量816

点赞数 1

文章标签： angularJS

本文介绍AngularJS中定时器的使用方法，包括$interval和$timeout服务的应用场景及注意事项，如循环计时器和事件延迟等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$interval是 window.setInterval的Angular包装形式。$ interval指每次延迟时间后执行响应的函数（也可以说：每次执行函数的间隔时间）。 $interval多数用于计时器备注：当你执行完这项服务后应该把它销毁。特别是当controller或者directive元素被销毁时而$ interval未被销毁。你应该考虑到在适当的时候取消interval事件。

  $interval   ( fn , delay , [count] , [invokeApply] , [Pass] );
  fn:          一个将被反复执行的函数。
  delay：      每次调用的间隔毫秒数值。
  count：      循环次数的数值，如果没设置，则无限制循环。
  nvokeApply： 如果设置为false，则避开脏值检查，否则将调用$apply。
  Pass：       函数的附加参数。

timeout函数的返回值是一个promise，当到达设置的超时时间时，这个承诺将被解决，并执行timeout函数。 $timeout多数用于事件延迟(延迟多长时间后，处理什么事情) 如果想要取消timeout，需要调用$ timeout.cancel(promise);

 $timeout(  fn , [delay] , [invokeApply] );
          fn：一个将被延迟执行的函数。
          delay：延迟的时间（毫秒）。
          invokeApply：如果设置为false，则跳过脏值检测，否则将调用$apply。

HTML

<!DOCTYPE html>  
<html>  
<meta charset="utf-8">  
<script src="js/angular.min.js" type="text/javascript"></script>  
<script src="js/interval1.js"></script>  
<style>  
    button{  
        padding:10px;  
        border:none;  
        border-radius: 5px;  
        background: deepskyblue;  
        color: #ffffff;  
    }  
</style>  
<body>  
<div ng-app="myApp" ng-controller="myCtrl">  
    <button  class="button gettestcode col-40" ng-click="getTestCode()"  
             ng-bind="description" ng-disabled="canClick">  
      </button>  
</div>  
</body>  
</html>

AngularJS

var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope,$interval) {  
    $scope.canClick=false;  
    $scope.description = "获取验证码";  
    var second=59;  
    var timerHandler;  
    $scope.getTestCode = function(){  
        timerHandler =$interval(function(){  
            if(second<=0){  
                $interval.cancel(timerHandler);    //当执行的时间59s,结束时，取消定时器 ，cancle方法取消   
                second=59;  
                $scope.description="获取验证码";  
                $scope.canClick=false;    //因为 ng-disabled属于布尔值，设置按钮可以点击，可点击发送  
            }else{  
                $scope.description=second+"s后重发";  
                second--;  
                $scope.canClick=true;  
            }  
        },1000)   //每一秒执行一次$interval定时器方法  
    };  
});