Angular 定時器$timeout和$interval關於定時刷新頁面和發送請求的用法
項目中有用到定時器定時刷新頁面的數據,在網上查看了一些資料,整理了一下,備忘。
$timeout
用法如下:$timeout(fn,[delay],[invokeApply]);
- fn:一個將被延遲執行的函數。
- delay:延遲的時間(毫秒)。
- invokeApply:如果設置為false,則跳過臟值檢測,否則將調用$apply。
方法:cancel(promise);
promise:$timeout函數的返回值。
具體使用:在項目中用到的其中一處是鍵入字符然後自動發送請求查詢,如果每鍵入一個字符即發送一次請求,在數據庫表龐大的時候,數據庫肯定會有意見了。這時候就需要用到延時查詢了,還需要結合$watch,具體使用如下:
var timeout;
$scope.$watch(‘idNo‘, function(newVal, oldVal) {
if(newVal != oldVal) {
if(timeout) {
$timeout.cancel(timeout);
}
timeout = $timeout(function() {
$http.get(url).success(function(data) {});
}, 800);
}
});
如上寫法,if(newVal != oldVal){}
是默認情況下不查詢,鍵入字符後才會發送請求查詢,若想默認情況下就查詢則需要去掉該if判斷。$timeout.cancel(timeout);
$interval
用法如下:$interval(fn,delay,[count],[invokeApply],[Pass]);
- fn:一個將被反復執行的函數。
- delay:每次調用的間隔毫秒數值。
- count:循環次數的數值,如果沒設置,則無限制循環。
- invokeApply:如果設置為false,則避開臟值檢查,否則將調用$apply。
- Pass:函數的附加參數。
方法:cancel(promise);
promise:$interval函數的返回值。
具體使用:
- 經常使用的是
function hello() {
...
console.log("hello world");
}
var timer = $interval(function(){
function hello() {}
},100);
timer.then(function() {
console.log("done");
});
以上是每100毫秒執行hello()函數,每執行完一次則調用then函數。
2. 控制循環的次數:var timer = $interval(function(){},100,10);
,參數10則是限制定時器循環10次,若該參數沒有定義則表示無數次循環。
3. 清除interval定時器:通過‘interval.cancle(timer)`刪除$interval返回的promise即可清除,而且必須要清除,否則會無限循環。在angular controller中只要開始執行定時任務,只要不清除則會一直執行,無論是否切換到其他的controller和頁面,可能會導致不必要的錯誤。
4. 項目中用到的完整實例:
// 定時器 定時刷新數據
var timer = $interval(
function() {
hello();//自己定義的每次需要執行的函數,也可以寫一些其他的內容
},
5000
);
//當DOM元素從頁面中被移除時,AngularJS將會在scope中觸發$destory事件。
//這讓我們可以有機會來cancel任何潛在的定時器。切換controller、頁面後即可調用
$scope.$on(
"$destroy",
function() {
$interval.cancel( timer );
}
);
Angular 定時器$timeout和$interval關於定時刷新頁面和發送請求的用法