AngularJS定時器的使用與移除操作方法【interval與timeout】
更新時間：2016年12月14日 10:26:07 作者：小小小小小亮
這篇文章主要介紹了AngularJS定時器的使用與移除操作方法,結(jié)合實(shí)例形式分析了AngularJS中interval與timeout方法的相關(guān)使用技巧,需要的朋友可以參考下
本文實(shí)例講述了AngularJS定時器的使用與移除操作方法。分享給大家供大家參考，具體如下：
1.相比較于JS中setTimeInterval和setTimeout，AngularJS中通過interval來實(shí)現(xiàn)定時器的效果，通過timeout來實(shí)現(xiàn)時間延遲。
$timeout //實(shí)現(xiàn)的是延遲執(zhí)行 $interval //實(shí)現(xiàn)的是定時器的效果
我們分別來看這兩個服務(wù)
（1）timeout
timeout相當(dāng)于JS原生里面的延遲執(zhí)行，不同的是該服務(wù)的函數(shù)返回的是一個promise對象。
var timer=$timeout(function(){
console.log('hello world')
},2000); //該函數(shù)延遲2秒執(zhí)行
timer.then(function(){ console.log('創(chuàng)建成功')},
function(){ console.log('創(chuàng)建不成功')};
（2）interval
interval與timeout服務(wù)大同小異，創(chuàng)建定時器返回的也是一個promise對象。
var timer=$interval(function(){
console.log('hello world')
},2000); //間隔2秒定時執(zhí)行
timer.then(function(){ console.log('創(chuàng)建成功')},
function(){ console.log('創(chuàng)建不成功')};
2.如何移除定時器
在angularJSo中，特別是在頁面切換或者說是路由切換的時候，我們需要移除響應(yīng)的定時器，我們可以通過on方法，監(jiān)聽路由切換時間。當(dāng)DOM結(jié)構(gòu)發(fā)生變化時，會執(zhí)行on方法：
$scope.$on('destroy',function(){
$interval.cancel($scope.timer);
}) //在控制器里，添加$on函數(shù)
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了Angularjs中ng-repeat的簡單實(shí)例的相關(guān)資料,這里提供兩個實(shí)例方法幫助大家徹底掌握這部分內(nèi)容，需要的朋友可以參考下2017-08-08
本篇文章主要介紹了Angular 2的管道Pipe的使用方法，詳細(xì)的介紹了管道的定義和使用方法，具有一定的參考價值，有興趣的可以了解一下2017-11-11
下面小編就為大家?guī)硪黄狝ngularJs 終極購物車的實(shí)例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了AngularJS中的DOM操作,較為詳細(xì)的分析了AngularJS針對DOM操作的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
下面小編就為大家分享一篇angularJs 表格添加刪除修改查詢方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了AngularJS 自定義指令，這里整理了詳細(xì)的資料及簡單實(shí)例代碼，有需要的小伙伴可以參考下2016-09-09
AngularJS實(shí)現(xiàn)的錨點(diǎn)樓層跳轉(zhuǎn)功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的錨點(diǎn)樓層跳轉(zhuǎn)功能,涉及AngularJS事件響應(yīng)實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)功能的相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
RequireJS 依賴關(guān)系的實(shí)例(推薦)
下面小編就為大家?guī)硪黄猂equireJS 依賴關(guān)系的實(shí)例(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
本篇文章主要介紹了AngularJS ng-repeat遍歷輸出的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
AngularJs bootstrap搭載前臺框架——基礎(chǔ)頁面
本文主要介紹AngularJs bootstrap搭載前臺框架基礎(chǔ)頁面的建設(shè)，這里整理餓了相關(guān)資料及實(shí)現(xiàn)實(shí)例代碼，有興趣的小伙伴可以參考下2016-09-09