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中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
基于pear auth实现登录验证
2010/02/26 PHP
php读取mysql的简单实例
2014/01/15 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
php简单判断文本编码的方法
2015/07/30 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
JS验证不重复验证码
2017/02/10 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
Python中的ceil()方法使用教程
2015/05/14 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
如何在Python中编写并发程序
2016/02/27 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
在python中使用nohup命令说明
2020/04/16 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
人事主管岗位职责
2014/01/30 职场文书
粗加工管理制度
2014/02/04 职场文书
初婚未育证明样本
2014/10/24 职场文书
高一语文教学反思
2016/02/16 职场文书