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 相关文章推荐
瀑布流布局并自动加载实现代码
Mar 12 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
vue-test-utils初使用详解
May 23 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
layui的select联动实现代码
Sep 28 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 Javascript
Vue实现简单的拖拽效果
Aug 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.MVC的模板标签系统(一)
2006/09/05 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
详解php中反射的应用
2016/03/15 PHP
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
python 布尔操作实现代码
2013/03/23 Python
跟老齐学Python之关于类的初步认识
2014/10/11 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
安装python及pycharm的教程图解
2019/10/10 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
师范大学音乐表演专业求职信
2013/10/23 职场文书
办公室主任岗位职责
2013/11/08 职场文书
社区志愿者心得体会
2014/01/03 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
淘宝活动总结范文
2014/06/26 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
培训通知
2015/04/17 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android