AngularJS定时器的使用与移除操作方法【interval与timeout】


Posted in Javascript onDecember 14, 2016

本文实例讲述了AngularJS定时器的使用与移除操作方法。分享给大家供大家参考,具体如下:

1.相比较于JS中setTimeInterval和setTimeout,AngularJS中通过interval来实现定时器的效果,通过timeout来实现时间延迟。

$timeout //实现的是延迟执行
$interval //实现的是定时器的效果

我们分别来看这两个服务

(1)timeout

timeout相当于JS原生里面的延迟执行,不同的是该服务的函数返回的是一个promise对象。

var timer=$timeout(function(){
   console.log('hello world')
},2000);  //该函数延迟2秒执行
timer.then(function(){ console.log('创建成功')},
function(){ console.log('创建不成功')};

(2)interval

interval与timeout服务大同小异,创建定时器返回的也是一个promise对象。

var timer=$interval(function(){
   console.log('hello world')
},2000);  //间隔2秒定时执行
timer.then(function(){ console.log('创建成功')},
function(){ console.log('创建不成功')};

2.如何移除定时器

在angularJSo中,特别是在页面切换或者说是路由切换的时候,我们需要移除响应的定时器,我们可以通过on方法,监听路由切换时间。当DOM结构发生变化时,会执行on方法:

$scope.$on('destroy',function(){
  $interval.cancel($scope.timer);
}) //在控制器里,添加$on函数

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
jsonp原理及使用
Oct 28 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
js匿名函数使用&传参(实例)
Sep 08 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 #Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 #Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 #Javascript
bootstrap modal弹出框的垂直居中
Dec 14 #Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 #Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 #Javascript
bootstrap模态框实现拖拽效果
Dec 14 #Javascript
You might like
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
如何在PHP中使用数组
2020/06/09 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
python更改已存在excel文件的方法
2018/05/03 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
公司面试感谢信
2014/02/01 职场文书
绿色环保口号
2014/06/12 职场文书
倡议书的写法
2014/08/30 职场文书
服务行业演讲稿
2014/09/02 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
python 中的@运算符使用
2021/05/26 Python
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技