AngularJS定时器的使用与移除操作方法【interval与timeout】
更新时间：2016年12月14日 10:26:07 作者：小小小小小亮
这篇文章主要介绍了AngularJS定时器的使用与移除操作方法,结合实例形式分析了AngularJS中interval与timeout方法的相关使用技巧,需要的朋友可以参考下
本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
这篇文章主要介绍了Angularjs中ng-repeat的简单实例的相关资料,这里提供两个实例方法帮助大家彻底掌握这部分内容，需要的朋友可以参考下2017-08-08
本篇文章主要介绍了Angular 2的管道Pipe的使用方法，详细的介绍了管道的定义和使用方法，具有一定的参考价值，有兴趣的可以了解一下2017-11-11
下面小编就为大家带来一篇AngularJs 终极购物车的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了AngularJS中的DOM操作,较为详细的分析了AngularJS针对DOM操作的原理、实现技巧与相关注意事项,需要的朋友可以参考下2016-11-11
下面小编就为大家分享一篇angularJs 表格添加删除修改查询方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了AngularJS 自定义指令，这里整理了详细的资料及简单实例代码，有需要的小伙伴可以参考下2016-09-09
这篇文章主要介绍了AngularJS实现的锚点楼层跳转功能,涉及AngularJS事件响应实现锚点跳转功能的相关操作技巧,需要的朋友可以参考下2018-01-01
下面小编就为大家带来一篇RequireJS 依赖关系的实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
本篇文章主要介绍了AngularJS ng-repeat遍历输出的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
AngularJs bootstrap搭载前台框架——基础页面
本文主要介绍AngularJs bootstrap搭载前台框架基础页面的建设，这里整理饿了相关资料及实现实例代码，有兴趣的小伙伴可以参考下2016-09-09
最新评论