AngularJS中$watch和$timeout的使用樣本_AngularJS

前言

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

然後，當$watch監聽的時候一開始代碼是這樣的

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

這樣做，看上去沒什麼大問題，每次輸入的時候就拉一次資料。但是！但是！但是！重要的事情說三遍！當使用者輸入“張三”這個搜尋字的時候，代碼是這樣執行的，“張”字拉了一次資料，“三”字有拉了一次資料。好了嘛，這還是兩個字，要是輸入十個字呢，伺服器就哭了，伺服器就來打前端了。

這個時候就需要用到Angular中的這貨了——$timeout，他是angular中的一個定時器。針對我們搜尋來說，我們在監聽filterOptions發生變化時，不要馬上請求，給他0.8秒的一個等待的時間，如果這0.8秒內filterOptions沒有又一次發生變化，那麼就請求拉資料，否則就繼續輸入。

代碼如下：

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

總結

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