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 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
jQuery插件制作的实例教程
May 16 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
Aug 02 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
vue 中的 render 函数作用详解
Feb 28 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创建sprite
2014/02/11 PHP
php递归创建目录的方法
2015/02/02 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
js charAt的使用示例
2014/02/18 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
django配置app中的静态文件步骤
2020/03/27 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
中文专业求职信
2014/06/20 职场文书
技术经济专业求职信
2014/09/03 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
红色革命电影观后感
2015/06/18 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
Go语言空白表示符_的实例用法
2021/07/04 Golang
python3实现常见的排序算法(示例代码)
2021/07/04 Python