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

来源:爱站网时间:2019-12-14编辑:网友分享
很多初学者对于Angular.js中定时器循环不理解,别着急,今天爱站技术频道带大家一起来分析Angular.js中定时器循环的3种方法,希望对你学习这方面知识有所帮助。

很多初学者对于Angular.js中定时器循环不理解,别着急,今天爱站技术频道带大家一起来分析Angular.js中定时器循环的3种方法,希望对你学习这方面知识有所帮助。

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

以上就是爱站技术频道小编所理解的Angular.js中定时器循环的3种方法,希望大家有什么疑问或见解可以放在评论栏,小编会尽快回复。

上一篇:JavaScript实现隐藏省略文字效果的方法

下一篇:jQuery实现动态添加、删除按钮及input输入框的方法

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载