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 相关文章推荐
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
Cakephp 执行主要流程
2010/03/24 PHP
CURL状态码列表(详细)
2013/06/27 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
php实现多城市切换特效
2015/08/09 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
javascript数据类型详解
2017/02/07 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
python使用urllib2提交http post请求的方法
2015/05/26 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
python如何删除文件中重复的字段
2019/07/16 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
文化活动实施方案
2014/03/28 职场文书
村容村貌整治方案
2014/05/21 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
婚庆司仪开场白
2015/05/29 职场文书
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers