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


Posted in Javascript onApril 27, 2017

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

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相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》 

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 #Javascript
微信小程序 wx:for的使用实例详解
Apr 27 #Javascript
微信小程序 动态传参实例详解
Apr 27 #Javascript
微信小程序 本地数据读取实例
Apr 27 #Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 #Javascript
js获取浏览器的各种属性
Apr 27 #Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 #jQuery
You might like
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
js转义字符介绍
2013/11/05 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python3.x对JSON的一些操作示例
2017/09/01 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
weblogic面试题
2016/03/07 面试题
班组长岗位职责范本
2014/01/05 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
诚信考试承诺书
2014/03/27 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
部队2015年终工作总结
2015/04/02 职场文书
解除合同协议书范本
2016/03/21 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
python缺失值的解决方法总结
2021/06/09 Python
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫