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文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
JavaScript执行机制详细介绍
Dec 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
PHP中常用的输出函数总结
2014/09/22 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
javascript实现的listview效果
2007/04/28 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
express.js中间件说明详解
2019/03/19 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
Python快速从注释生成文档的方法
2016/12/26 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
python通过实例讲解反射机制
2019/10/17 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
历史专业个人求职信范文
2013/12/07 职场文书
聘任书模板
2014/03/29 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
房贷收入证明范本
2015/06/12 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏