当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > Angular.js中定时器循环的3种方法总结

Angular.js中定时器循环的3种方法总结

2018年04月30日  | 移动技术网IT编程  | 我要评论

头顶锅盖身披麻袋,xxoo1.us你懂的,2014养老金上调消息

本文主要设计定时器的三种循环，模板自配，下面分享给大家供大家参考，具体如下：

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();
})

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网