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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 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下封装较好的数字分页方法
2010/11/23 PHP
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
YII框架http缓存操作示例
2019/04/29 PHP
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
vue实现信息管理系统
2020/05/30 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
python基础教程之对象和类的实际运用
2014/08/29 Python
Python实现一个简单的MySQL类
2015/01/07 Python
python字符串连接方法分析
2016/04/12 Python
python制作websocket服务器实例分享
2016/11/20 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python 实现try重新执行
2019/12/21 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
幼儿园安全检查制度
2014/01/30 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
安全施工责任书
2014/08/25 职场文书
高一作文之乐趣
2019/11/21 职场文书
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android