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-12-12
详解angularJS动态生成的页面中ng-click无效解决办法
这篇文章主要介绍了详解angularJS动态生成的页面中ng-click无效解决办法，非常具有实用价值，需要的朋友可以参考下2017-06-06
这篇文章主要介绍了浅谈angularjs $http提交数据探索，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-01-01
Angular 4依赖注入学习教程之InjectToken的使用（八）
这篇文章主要给大家介绍了关于Angular 4依赖注入之InjectToken使用的相关资料，文中介绍的非常详细，对大家学习或者使用Angular4具有一定的参考学习价值，需要的朋友们下面来跟着小编一起学习学习吧。2017-06-06
本文用实例详细给大家展示了angular.js分页代码，代码很详细，感兴趣的小伙伴们可以参考一下2016-07-07
下面小编就为大家分享一篇AngularJs 最新验证手机号码的实例,成功测试通过，具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧2017-11-11
本文通过实例代码给大家介绍了angularjs $parse的相关知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-09-09
Angular 4依赖注入学习教程之ValueProvider的使用（七）
这篇文章主要给大家介绍了关于Angular 4依赖注入之ValueProvider使用的相关资料，文中介绍的非常详细，对大家学习或者使用Angular4具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
本文给大家分享的是通过angular中的$compile源码进行分析，从而更好的理解angular的使用，非常的不错，希望大家能够喜欢。2016-01-01
AngularJS之ionic 框架下实现 Localstorage本地存储
这篇文章主要介绍了AngularJS之ionic 框架下实现 Localstorage本地存储，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
最新评论