AngularJS中$watch和$timeout的使用示例
前言
相信使用過Angular的小伙伴應(yīng)該對$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ā)生變化時，調(diào)用方法
$scope.getPagedDataAsync('admin/bill/'+$stateParams.page+'?pageCount='+$scope.paginationConf.itemsPerPage,$scope.filterOptions);
}
}, true);
這樣做，看上去沒什么大問題，每次輸入的時候就拉一次數(shù)據(jù)。但是！但是！但是！重要的事情說三遍！當用戶輸入“張三”這個搜索字的時候，代碼是這樣執(zhí)行的，“張”字拉了一次數(shù)據(jù)，“三”字有拉了一次數(shù)據(jù)。好了嘛，這還是兩個字，要是輸入十個字呢，服務(wù)器就哭了，服務(wù)器就來打前端了。
這個時候就需要用到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);
總結(jié)
以上就是這篇文章的全部內(nèi)容，希望能對大家的學習或者工作帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
客戶端表單驗證是AngularJS里面最酷的功能之一。 AngularJS表單驗證可以讓你從一開始就寫出一個具有交互性和可相應(yīng)的現(xiàn)代HTML5表單。在AngularJS中，有許多表單驗證指令。在這里，我們將談?wù)剮讉€最流行指令，然后我們將討論如何編寫自定義的驗證。2015-01-01
Angular JS 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。接下來通過本文給大家介紹AngularJS實用開發(fā)技巧的相關(guān)資料,需要的朋友可以參考下2016-07-07
本篇文章主要介紹了ionic本地相冊、拍照、裁剪、上傳（單圖完全版），非常具有實用價值，需要的朋友可以參考下2017-10-10
在JavaScript的AngularJS庫中進行單元測試的方法
這篇文章主要介紹了在JavaScript的AngularJS庫中進行單元測試的方法,主要針對AngularJS中的控制器相關(guān),需要的朋友可以參考下2015-06-06
這篇文章主要介紹了AngularJS相關(guān)的一些編程思想,AngularJS是一款熱門的JavaScript庫,推薦!需要的朋友可以參考下2015-06-06
Angularjs+bootstrap+table多選（全選）支持單擊行選中實現(xiàn)編輯、刪除功能
這篇文章主要介紹了Angularjs bootstrap table多選（全選）支持單擊行選中實現(xiàn)編輯、刪除功能,需要的朋友可以參考下2017-03-03
深究AngularJS中ng-drag、ng-drop的用法
本篇文章主要介紹了深究AngularJS中ng-drag、ng-drop的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
在我們開發(fā)中經(jīng)常需要在頁面顯示給用戶的信息需要一定處理格式化，才能顯示給用戶。在angularjs中為我們提供了叫filter的指令，讓我們能夠很輕易就能做到著一些列的功能，angularjs內(nèi)部為我們提供了number等很多內(nèi)置的filter。2015-05-05
AngularJS自定義服務(wù)與fliter的混合使用
這篇文章主要介紹了AngularJS自定義服務(wù)與fliter的混合使用的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
本篇文章主要介紹了基于AngularJS的拖拽上傳的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07