angularjs定時任務的設置與清除示例

更新時間：2017年06月02日 10:35:03 作者：heartbeaty

本篇文章主要介紹了angularjs定時任務的設置與清除示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

人們似乎常常將AngularJS中的$timeOut() $interval()函數(shù)看做是一個內(nèi)置的、無須在意的函數(shù)。但是，如果你忘記了$timeOut()$interval()的回調(diào)函數(shù)將會造成非常不好的影響，你可能會因此遇到代碼莫名其妙的出現(xiàn)問題，或者無端拋出一個錯誤甚至是一遍一遍的重復對的你的服務器進行$http請求這些詭異的情形。管理好你的$timeOut/$interval定時器的小技巧就是在$destory事件中將它們?nèi)∠?/p>

和JavaScript中原生的setTimeout()以及setInterval()函數(shù)不同，AngularJS中的$timeOut()函數(shù)會返回一個promise。和其他的promise一樣，你可以綁定$timeOut的resolved和rejected時間。然而更重要的是，你可以通過將這個promise傳遞給$timeOut.cancel()方法來取消掉潛在的定時器。

設置定時任務，給定時任務起一個名字time_upd，為的是方便清理的時候直接調(diào)用名稱。

var timeout_upd = $interval($scope.upd_data ,6000);

注意：設置的時候$interval(fn ,time);第一個參數(shù)fn 不能寫“()”，只能寫$scope.方法名稱。第二個參數(shù)是定時執(zhí)行的時間間隔，單位為毫秒。

清除定時任務，AngularJS將會在scope中觸發(fā)$destory事件。這讓我們可以有機會來cancel任何潛在的定時器。

$scope.$on('$destroy',function(){ 
    $interval.cancel(timeout_upd); 
  })

我的頁面是這種格式的，如下圖所示。angularjs在“實時數(shù)據(jù)監(jiān)測”這個模塊設置了一個定時任務，當我點擊菜單欄到別的頁面時，默認的這個定時任務還在執(zhí)行，占用很多資源。所以必須得清除這個定時任務，原生的清除window.clearInterval(timeout_upd);是不管用的，必須用angularjs自帶的清除方法，如上代碼所示。

注意：angularjs中設置了定時任務之后，必須清除定時任務，不然angularjs會在離開這個controller后，仍然會執(zhí)行這個定時任務。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

AngularJS實現(xiàn)動態(tài)切換樣式的方法分析
這篇文章主要介紹了AngularJS實現(xiàn)動態(tài)切換樣式的方法,結合實例形式分析了AngularJS事件響應與樣式動態(tài)控制相關操作技巧,需要的朋友可以參考下
2018-06-06
詳解Angular數(shù)據(jù)綁定及其實現(xiàn)方式
數(shù)據(jù)綁定是將應用程序UI或用戶界面綁定到模型的機制。使用數(shù)據(jù)綁定，用戶將能夠使用瀏覽器來操縱網(wǎng)站上存在的元素。
2021-05-05
Angularjs注入攔截器實現(xiàn)Loading效果
angularjs作為一個全ajax的框架，對于請求，如果頁面上不做任何操作的話，在結果反回來之前，頁面是沒有任何響應的，不像普通的HTTP請求，會有進度條之類
2015-12-12
AngularJS基礎 ng-class-odd 指令示例
本文主要介紹AngularJS ng-class-odd 指令,這里對ng-class-odd基礎知識做了詳細整理,并有示例代碼和效果圖,學習AngularJS的同學可以參考下
2016-08-08
詳解如何構建Angular項目目錄結構
本篇文章主要介紹了詳解如何構建Angular項目目錄結構，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
AngularJS實現(xiàn)的JSONP跨域訪問數(shù)據(jù)傳輸功能詳解
這篇文章主要介紹了AngularJS實現(xiàn)的JSONP跨域訪問數(shù)據(jù)傳輸功能,較為詳細的分析了JSONP的概念、功能并結合實例形式給出了AngularJS使用JSONP進行跨域訪問數(shù)據(jù)傳輸?shù)南嚓P技巧,需要的朋友可以參考下
2017-07-07
詳解Angular如何正確的操作DOM
這篇文章主要介紹了詳解Angular如何正確的操作DOM，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
詳解Angular中的自定義服務Service、Provider以及Factory
本篇文章主要介紹了詳解Angular中的自定義服務Service、Provider以及Factory，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
Angularjs的鍵盤事件的綁定
這篇文章主要介紹了Angularjs的鍵盤事件的綁定的相關資料,這里提供了兩種方法，1.ng內(nèi)置指令，2.自定義指令，并進行比較，需要的朋友可以參考下
2017-07-07
AngularJS的內(nèi)置過濾器詳解
在我們開發(fā)中經(jīng)常需要在頁面顯示給用戶的信息需要一定處理格式化，才能顯示給用戶。在angularjs中為我們提供了叫filter的指令，讓我們能夠很輕易就能做到著一些列的功能，angularjs內(nèi)部為我們提供了number等很多內(nèi)置的filter。
2015-05-05