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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
巧用canvas
Jan 21 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
php实现短信发送代码
2015/07/05 PHP
php获取错误信息的方法
2015/07/17 PHP
php实现将Session写入数据库
2015/07/26 PHP
分享php多功能图片处理类
2016/05/15 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
学习python分支结构
2019/05/17 Python
Python文件操作函数用法实例详解
2019/12/24 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
爱心倡议书范文
2014/05/12 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS