AngularJs定时器$interval 和 $timeout详解


Posted in Javascript onMay 25, 2017

$interval

window.setInterval的Angular包装形式。Fn是每次延迟时间后被执行的函数。

间隔函数的返回值是一个承诺。这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后被取消,如果迭代次数未定义,则无限制的执行。通知的值将是运行的迭代次数。取消一个间隔,调用$intreval.cancel(promise)。

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

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

fn:一个将被反复执行的函数。

delay:每次调用的间隔毫秒数值。

count:循环次数的数值,如果没设置,则无限制循环。

invokeApply:如果设置为false,则避开脏值检查,否则将调用$apply。

Pass:函数的附加参数。

方法:

cancel(promise);

取消与承诺相关联的任务。

promise:$interval函数的返回值。

使用代码:

(function () {
  angular.module("Demo", [])
  .controller("testCtrl",["$interval",testCtrl]);
  function testCtrl($interval){
   var toDo = function () {
     console.log("Hello World");
   };
   $interval(toDo, 3000, 10);
  };
 }());

$timeout

window.setTimeout的Angular包装形式。Fn函数包装成一个try/catch块,代表$exceptionHandler服务里的任何异常。

timeout函数的返回值是一个promise,当到达设置的超时时间时,这个承诺将被解决,并执行timeout函数。

需要取消timeout,需要调用$timeout.cancel(promise);

使用: $timeout(fn,[delay],[invokeApply]);

fn:一个将被延迟执行的函数。

delay:延迟的时间(毫秒)。

invokeApply:如果设置为false,则跳过脏值检测,否则将调用$apply。

方法:

cancel(promise);

取消与承诺相关联的任务。这个的结果是,承诺将被以摒弃方式来解决。

promise:$timeout函数返回的承诺。

(function () {
  angular.module("Demo", [])
  .controller("testCtrl",["$timeout",testCtrl]);
  function testCtrl($timeout){
   var toDo = function () {
     console.log("Hello World");
   };
   $timeout(toDo,5000)
  };
 }());

大致使用方法可以和原生js的setInterval和setTimeout那样使用,一些使用小技巧可以用在浏览器单线程的事件执行方面... 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
javascript函数特点实例分析
May 14 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 #Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 #Javascript
React-router中结合webpack实现按需加载实例
May 25 #Javascript
node.js操作mongodb简单示例分享
May 25 #Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 #Javascript
node.js操作mysql简单实例
May 25 #Javascript
基于vue实现swipe分页组件实例
May 25 #Javascript
You might like
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
jquery的$().each和$.each的区别
2019/01/18 jQuery
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python定时执行之Timer用法示例
2015/05/27 Python
python遍历目录的方法小结
2016/04/28 Python
python查看模块安装位置的方法
2018/10/16 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
学生宿舍管理制度
2014/01/30 职场文书
委托公证书样本
2015/01/23 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
开业典礼致辞
2015/07/29 职场文书
中秋节随笔
2015/08/15 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
用Python selenium实现淘宝抢单机器人
2021/06/18 Python