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 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
python实现迭代法求方程组的根过程解析
Nov 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
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python分支结构(switch)操作简介
2018/01/17 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
python中单下划线_的常见用法总结
2018/07/10 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
python遍历小写英文字母的方法
2019/01/02 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Django单元测试工具test client使用详解
2019/08/02 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
python中format函数如何使用
2020/06/22 Python
三星英国官网:Samsung英国
2018/09/25 全球购物
雷人标语集锦
2014/06/19 职场文书
最美家庭活动方案
2014/08/31 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
小学教师读书笔记
2015/07/01 职场文书
运动会通讯稿200字
2015/07/20 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL