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 相关文章推荐
学习jquery之一
Apr 27 Javascript
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
AngularJS实现表单验证
Jan 28 Javascript
javascript中关于&& 和 || 表达式的小技巧分享
Apr 10 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
Javascript动画效果(1)
Oct 11 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 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
两个强悍的php 图像处理类1
2009/06/15 PHP
php 归并排序 数组交集
2011/05/10 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
nodeJS微信分享
2017/12/20 NodeJs
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python常用特殊方法实例总结
2019/03/22 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
淘宝活动策划方案
2014/02/06 职场文书
会计岗位描述
2014/02/22 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
收入证明范本
2015/06/12 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
Python中常见的导入方式总结
2021/05/06 Python
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技