1. 程式人生 > >Angular 定時器$timeout和$interval關於定時刷新頁面和發送請求的用法

Angular 定時器$timeout和$interval關於定時刷新頁面和發送請求的用法

數值 事件 view sco 項目 span 檢查 delay .get

項目中有用到定時器定時刷新頁面的數據,在網上查看了一些資料,整理了一下,備忘。

$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);

是清除上次$itmeout返回的promise。

$interval

用法如下$interval(fn,delay,[count],[invokeApply],[Pass]);

  • fn:一個將被反復執行的函數。
  • delay:每次調用的間隔毫秒數值。
  • count:循環次數的數值,如果沒設置,則無限制循環。
  • invokeApply:如果設置為false,則避開臟值檢查,否則將調用$apply。
  • Pass:函數的附加參數。

方法cancel(promise);
promise:$interval函數的返回值。
具體使用

  1. 經常使用的是
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. 清除intervalinterval.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關於定時刷新頁面和發送請求的用法