前言
相信使用過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);總結
以上就是這篇文章的全部內容，希望能對大家的學習或者工作帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
