angularjs定時任務的設置與清除示例
人們似乎常常將AngularJS中的$timeOut() $interval()函數(shù)看做是一個內置的、無須在意的函數(shù)。但是,如果你忘記了$timeOut()$interval()的回調函數(shù)將會造成非常不好的影響,你可能會因此遇到代碼莫名其妙的出現(xiàn)問題,或者無端拋出一個錯誤甚至是一遍一遍的重復對的你的服務器進行$http請求這些詭異的情形。管理好你的$timeOut/$interval定時器的小技巧就是在$destory事件中將它們取消。
和JavaScript中原生的setTimeout()以及setInterval()函數(shù)不同,AngularJS中的$timeOut()函數(shù)會返回一個promise。和其他的promise一樣,你可以綁定$timeOut的resolved和rejected時間。然而更重要的是,你可以通過將這個promise傳遞給$timeOut.cancel()方法來取消掉潛在的定時器。
設置定時任務,給定時任務起一個名字time_upd,為的是方便清理的時候直接調用名稱。
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í)行這個定時任務。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- AngularJs定時器$interval 和 $timeout詳解
- Angular.js中定時器循環(huán)的3種方法總結
- AngularJS定時器的使用與移除操作方法【interval與timeout】
- Angularjs 雙向綁定時字符串的轉換成數(shù)字類型的問題
- 詳解Angular.js數(shù)據(jù)綁定時自動轉義html標簽及內容
- AngularJS實現(xiàn)頁面定時刷新
- angular2倒計時組件使用詳解
- ionic+AngularJs實現(xiàn)獲取驗證碼倒計時按鈕
- AngularJS 支付倒計時功能實現(xiàn)思路
- Angular實現(xiàn)的簡單定時器功能示例
相關文章
Angularjs 實現(xiàn)移動端在線測評效果(推薦)
這篇文章主要介紹了Angularjs 實現(xiàn)移動端在線測評效果,需要的朋友可以參考下2017-04-04Angular.JS讀取數(shù)據(jù)庫數(shù)據(jù)調用完整實例
這篇文章主要介紹了Angular.JS讀取數(shù)據(jù)庫數(shù)據(jù)調用,結合完整實例形式分析了AngularJS使用$http.get方法與后臺php交互讀取數(shù)據(jù)庫數(shù)據(jù)相關操作技巧,需要的朋友可以參考下2019-07-07AngularJs學習第五篇從Controller控制器談談$scope作用域
這篇文章主要介紹了AngularJs(五)從Controller控制器談談$scope作用域 的相關資料,需要的朋友可以參考下2016-06-06AngularJS中如何使用$parse或$eval在運行時對Scope變量賦值
這篇文章主要介紹了AngularJS中如何使用$parse或$eval在運行時對Scope變量賦值的相關資料,本文介紹的非常詳細,具有參考借鑒價值,需要的朋友可以參考下2016-01-01詳解如何在Angular應用中發(fā)起HTTP?302 redirect
這篇文章主要介紹了如何在Angular應用中發(fā)起HTTP 302 redirect詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12