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 相关文章推荐
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
在webstorm中配置less的方法详解
Sep 25 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 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实现的微信红包算法分析(非官方)
2015/09/25 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
vue实现扫码功能
2020/01/17 Javascript
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
python中列表的含义及用法
2020/05/26 Python
pandas分批读取大数据集教程
2020/06/06 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
英语求职信范文
2014/05/23 职场文书
个人四风对照检查材料
2014/09/26 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
基石观后感
2015/06/12 职场文书