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 相关文章推荐
理解 JavaScript 预解析
Oct 25 Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
php检测url是否存在的方法
2015/04/14 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
如何使用python爬取csdn博客访问量
2016/02/14 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
python WindowsError的错误代码详解
2017/07/23 Python
kali中python版本的切换方法
2019/07/11 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
音乐系毕业生自荐信
2013/10/27 职场文书
安全生产先进个人材料
2014/02/06 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
大学军训感言400字
2014/03/11 职场文书
医者仁心观后感
2015/06/17 职场文书