Angular.js中定時(shí)器循環(huán)的3種方法總結(jié)
更新時(shí)間：2017年04月27日 10:53:20 作者：fjj1084650208
這篇文章主要給大家總結(jié)了angular.js中定時(shí)器循環(huán)的3種方法，分別是利用$interlval實(shí)現(xiàn)、$timeout的遞歸調(diào)用來(lái)實(shí)現(xiàn)以及$timeout借助arguments.callee來(lái)實(shí)現(xiàn)，每種方法都給出了詳細(xì)的示例艾瑪供大家學(xué)習(xí)參考，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。
本文主要設(shè)計(jì)定時(shí)器的三種循環(huán)，模板自配，下面分享給大家供大家參考，具體如下：
1、$interlval實(shí)現(xiàn)，比較簡(jiǎn)單和原生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的遞歸調(diào)用來(lái)實(shí)現(xiàn)
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來(lái)實(shí)現(xiàn)
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();
})
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
Angularjs 手寫日歷的實(shí)現(xiàn)代碼（不用插件）
本篇文章介紹了Angularjs 手寫日歷的實(shí)現(xiàn)代碼（不用插件），整理了詳細(xì)的代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
AngularJS實(shí)現(xiàn)一次監(jiān)聽多個(gè)值發(fā)生的變化
這文章給大家介紹了如何利用AngularJS一次監(jiān)聽多個(gè)值發(fā)生的變化，文中通過(guò)示例代碼演示，這樣更方便大家理解學(xué)習(xí)，有需要的可以參考借鑒。2016-08-08
angular同一頁(yè)面跳轉(zhuǎn)重新執(zhí)行的實(shí)現(xiàn)方法
這篇文章主要介紹了angular同一頁(yè)面跳轉(zhuǎn)重新執(zhí)行的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
下面小編就為大家?guī)?lái)一篇淺談AngularJs指令之scope屬性詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
詳解JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定
這篇文章主要介紹了JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定,包括作用域的繼承以及數(shù)據(jù)的單向和雙向綁定等重要知識(shí)點(diǎn),需要的朋友可以參考下2016-03-03
angularjs通過(guò)過(guò)濾器返回超鏈接的方法
這篇文章主要介紹了angularjs通過(guò)過(guò)濾器返回超鏈接的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
本文主要介紹AngularJS 事件,這里整理了相關(guān)資料,比較詳細(xì)的介紹了AngularJS的使用方法,有需要的小伙伴參考下2016-07-07
AngularJS 限定$scope的范圍實(shí)例詳解
這篇文章主要介紹了AngularJS 限定$scope的范圍實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了淺談Angular 觀察者模式理解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
AngularJS基礎(chǔ)學(xué)習(xí)筆記之指令
指令（Directives）是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令，但還是經(jīng)常需要?jiǎng)?chuàng)建應(yīng)用特定的指令。這篇教程會(huì)為你講述如何自定義指令，以及介紹如何在實(shí)際項(xiàng)目中使用。2015-05-05