AngularJS $timeout和 $interval ，定时器手机验证码倒计时

$interval是 window.setInterval的Angular包装形式。$interval指每次延迟时间后执行响应的函数（也可以说：每次执行函数的间隔时间）。$interval多数用于计时器

备注：当你执行完这项服务后应该把它销毁。特别是当controller或者directive元素被销毁时而$interval未被销毁。你应该考虑到在适当的时候取消interval事件。

$interval ( fn , delay , [count] , [invokeApply] , [Pass] );

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

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

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

下面来看一个定时器的例子：

这面截图的例子可用在手机获取验证码的部分功能，其功能的实现就用到了 $interval 定时器，

interval.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>

interval.js

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定时器方法
    };
});

posted @ 2018-07-16 20:55 Jepson6669 阅读(324) 评论(0) 编辑收藏举报

刷新页面返回顶部

jepson6669

AngularJS $timeout和 $interval ，定时器手机验证码倒计时