• 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定时器方法
        };
    });
  • 相关阅读:
    Could not update ICEauthority file /var/lib/gdm/.ICEauthority
    反爬虫中技术点的定义
    反爬虫一些问题
    反爬虫准备
    题解「BZOJ4621 Tc605」
    题解「ZJOI2019 语言」
    题解「清华集训2012 序列操作」
    题解「CF1174F Ehab and the Big Finale」
    题解「CF516D Drazil and Morning Exercise」
    题解「HNOI2018 寻宝游戏」
  • 原文地址:https://www.cnblogs.com/jepson6669/p/9320068.html
Copyright © 2020-2023  润新知