博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJS $timeout和 $interval ,定时器手机验证码倒计时
阅读量:5339 次
发布时间:2019-06-15

本文共 1528 字,大约阅读时间需要 5 分钟。

$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

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

 

转载于:https://www.cnblogs.com/jepson6669/p/9320068.html

你可能感兴趣的文章
python基本数据类型
查看>>
1305: [CQOI2009]dance跳舞 - BZOJ
查看>>
关于TDD的思考
查看>>
Cocos2d-x学习之windows 7 android环境搭建
查看>>
将html代码中的大写标签转换成小写标签
查看>>
jmeter多线程组间的参数传递
查看>>
零散笔记
查看>>
学 Win32 汇编[22] - 逻辑运算指令: AND、OR、XOR、NOT、TEST
查看>>
MaiN
查看>>
[Python学习] 简单网络爬虫抓取博客文章及思想介绍
查看>>
第四章 解析库的使用 4.2 BeautifulSoup的使用
查看>>
触发器课程SQL Server 知识梳理九 触发器的使用
查看>>
信息浏览器从Android的浏览器中传递cookie数据到App中信息浏览器
查看>>
客户端连接linux虚拟机集群报错
查看>>
linux下部署一个JavaEE项目的简单步骤
查看>>
hash储存机制
查看>>
[Android学习系列16]Android把php输出的json加载到listview
查看>>
20145205 《信息安全系统设计基础》第14周学习总结
查看>>
XML中CDATA和#PCDATA的区别
查看>>
6)添加一个窗口的图标
查看>>