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 17 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
php显示时间常用方法小结
2015/06/05 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
python 多线程重启方法
2019/02/18 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
基于python实现文件加密功能
2020/01/06 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
2014两会学习心得:时代的发展
2014/03/17 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
节约用水广告语60条
2019/11/14 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python