AngularJS定時器的使用與移除操作方法【interval與timeout】
更新時間：2016年12月14日 10:26:07 作者：小小小小小亮
這篇文章主要介紹了AngularJS定時器的使用與移除操作方法,結(jié)合實例形式分析了AngularJS中interval與timeout方法的相關(guān)使用技巧,需要的朋友可以參考下
本文實例講述了AngularJS定時器的使用與移除操作方法。分享給大家供大家參考，具體如下：
1.相比較于JS中setTimeInterval和setTimeout，AngularJS中通過interval來實現(xiàn)定時器的效果，通過timeout來實現(xiàn)時間延遲。
$timeout //實現(xiàn)的是延遲執(zhí)行 $interval //實現(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 Understanding Angular Templates
本文主要介紹AngularJs Understanding Angular Templates的資料，這里整理了詳細(xì)的資料及簡單示例代碼，有興趣的小伙伴的參考下2016-09-09
這篇文章主要介紹了詳解Angular路由之路由守衛(wèi)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
AngularJS基礎(chǔ) ng-selected 指令簡單示例
本文主要介紹AngularJS ng-selected 指令,這里對ng-selected 指令的基礎(chǔ)資料做了詳細(xì)介紹，并附有示例代碼，有需要的小伙伴可以參考下2016-08-08
現(xiàn)實世界千變?nèi)f化,區(qū)區(qū)幾種內(nèi)置指令不可能滿足所有的需求,下面這篇文章主要給大家介紹了關(guān)于Angular自定義指令Tooltip的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
Vue組件是學(xué)習(xí)Vue框架最比較難的部分,下面這篇文章主要給大家介紹了關(guān)于如何通過簡單的代碼描述Angular父組件、子組件傳值的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了AngularJS實現(xiàn)注冊表單驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了詳解Ubuntu安裝angular-cli遇到的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
AngularJs導(dǎo)出數(shù)據(jù)到Excel的示例代碼
本篇文章主要介紹了AngularJs導(dǎo)出Excel的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
Angular4學(xué)習(xí)筆記之準(zhǔn)備和環(huán)境搭建項目
這篇文章主要介紹了Angular4學(xué)習(xí)筆記之準(zhǔn)備和環(huán)境搭建項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了Angularjs中的ui-bootstrap的使用教程,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02