AngularJS中$watch和$timeout的使用示例

更新時間：2016年09月20日 11:45:58 投稿：daisy

這篇文章給大家介紹了AngularJS中$watch和$timeout的使用例子，通過示例代碼相信更能讓大家理解，有需要的朋友們下面來一起看看吧。

前言

相信使用過Angular的小伙伴應該對$watch這個監(jiān)聽不陌生，它主要用于監(jiān)聽模型的變化，當你的模型部分發(fā)生變化時它會通知你。我在最近的平臺管理開發(fā)中，也用到這個牛逼哄哄的Angular，在做filter的時候不可以避免的用到$watch監(jiān)聽。當時我的想法就是搜索的時候不需要點擊搜索按鈕，這樣在用戶體驗上也是極好的，避免了輸入后再次點擊的操作步驟。

然后，當$watch監(jiān)聽的時候一開始代碼是這樣的

$scope.$watch('filterOptions', function (newVal, oldVal) {
 if (newVal !== oldVal) {
 //filterOptions發(fā)生變化時，調用方法
 $scope.getPagedDataAsync('admin/bill/'+$stateParams.page+'?pageCount='+$scope.paginationConf.itemsPerPage,$scope.filterOptions);
 }
}, true);

這樣做，看上去沒什么大問題，每次輸入的時候就拉一次數(shù)據(jù)。但是！但是！但是！重要的事情說三遍！當用戶輸入“張三”這個搜索字的時候，代碼是這樣執(zhí)行的，“張”字拉了一次數(shù)據(jù)，“三”字有拉了一次數(shù)據(jù)。好了嘛，這還是兩個字，要是輸入十個字呢，服務器就哭了，服務器就來打前端了。

這個時候就需要用到Angular中的這貨了——$timeout，他是angular中的一個定時器。針對我們搜索來說，我們在監(jiān)聽filterOptions發(fā)生變化時，不要馬上請求，給他0.8秒的一個等待的時間，如果這0.8秒內(nèi)filterOptions沒有又一次發(fā)生變化，那么就請求拉數(shù)據(jù)，否則就繼續(xù)輸入。

代碼如下：

$scope.$watch('filterOptions', function (newVal, oldVal) {
 if (newVal !== oldVal) {
  if (timeout) $timeout.cancel(timeout);
  timeout = $timeout(function() {
  $scope.getPagedDataAsync('admin/bill/'+$stateParams.page+'?pageCount='+$scope.paginationConf.itemsPerPage,$scope.filterOptions);
  }, 800);
 }
 }, true);

總結

以上就是這篇文章的全部內(nèi)容，希望能對大家的學習或者工作帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: