Angular.js中定时器循环的3种方法总结
更新时间：2017年04月27日 10:53:20 作者：fjj1084650208
这篇文章主要给大家总结了angular.js中定时器循环的3种方法，分别是利用$interlval实现、$timeout的递归调用来实现以及$timeout借助arguments.callee来实现，每种方法都给出了详细的示例艾玛供大家学习参考，需要的朋友们下面跟着小编一起来学习学习吧。
本文主要设计定时器的三种循环，模板自配，下面分享给大家供大家参考，具体如下：
1、$interlval实现，比较简单和原生js的setInterval比较相似
var app = angular.module('myApp',[]);
app.run(function($rootScope , $interval){
var img=["http://hdn.xnimg.cn/photos/hdn321/20130612/2235/h_main_NNN4_e80a000007df111a.jpg" ,"http://ww2.sinaimg.cn/crop.0.0.1080.1080.1024/d773ebfajw8eum57eobkwj20u00u075w.jpg","http://h.hiphotos.baidu.com/zhidao/pic/item/3812b31bb051f81991b9d8dbdcb44aed2f73e787.jpg"]
var i = 0;
var timer = $interval(function(){
if(i >= img.length){
i = 0;
}
$rootScope.imgSrc = img[i++];
},1000)
});
2、$timeout的递归调用来实现
app.run(function($rootScope,$timeout){
var img=["http://hdn.xnimg.cn/photos/hdn321/20130612/2235/h_main_NNN4_e80a000007df111a.jpg" ,"http://ww2.sinaimg.cn/crop.0.0.1080.1080.1024/d773ebfajw8eum57eobkwj20u00u075w.jpg","http://h.hiphotos.baidu.com/zhidao/pic/item/3812b31bb051f81991b9d8dbdcb44aed2f73e787.jpg"]
var i = 0;
$rootScope.c = 0;
var loop = function(){
$timeout(function(){
if(i >= img.length){
i = 0;
}
$rootScope.imgSrc=img[i++];
loop();
$rootScope.c += 1;
},2000)
};
loop();
})
3、$timeout借助arguments.callee来实现
app.run(function($rootScope,$timeout){
var img=["http://hdn.xnimg.cn/photos/hdn321/20130612/2235/h_main_NNN4_e80a000007df111a.jpg" ,"http://ww2.sinaimg.cn/crop.0.0.1080.1080.1024/d773ebfajw8eum57eobkwj20u00u075w.jpg","http://h.hiphotos.baidu.com/zhidao/pic/item/3812b31bb051f81991b9d8dbdcb44aed2f73e787.jpg"]
var i = 0;
$rootScope.c = 0;
var loop = function(){
$timeout(function(){
if(i >= img.length){
i = 0;
}
$rootScope.imgSrc=img[i++];
loop();
$rootScope.c += 1;
},2000)
};
loop();
})
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
本篇文章介绍了Angularjs 手写日历的实现代码（不用插件），整理了详细的代码，非常具有实用价值，需要的朋友可以参考下2017-10-10
这文章给大家介绍了如何利用AngularJS一次监听多个值发生的变化，文中通过示例代码演示，这样更方便大家理解学习，有需要的可以参考借鉴。2016-08-08
这篇文章主要介绍了angular同一页面跳转重新执行的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
下面小编就为大家带来一篇浅谈AngularJs指令之scope属性详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
详解JavaScript的AngularJS框架中的作用域与数据绑定
这篇文章主要介绍了JavaScript的AngularJS框架中的作用域与数据绑定,包括作用域的继承以及数据的单向和双向绑定等重要知识点,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了angularjs通过过滤器返回超链接的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
本文主要介绍AngularJS 事件,这里整理了相关资料,比较详细的介绍了AngularJS的使用方法,有需要的小伙伴参考下2016-07-07
这篇文章主要介绍了AngularJS 限定$scope的范围实例详解的相关资料,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了浅谈Angular 观察者模式理解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
指令（Directives）是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令，但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令，以及介绍如何在实际项目中使用。2015-05-05
最新评论