AngularJS中$watch和$timeout的使用示例
前言
相信使用過Angular的小伙伴應(yīng)該對(duì)$watch這個(gè)監(jiān)聽不陌生，它主要用于監(jiān)聽模型的變化，當(dāng)你的模型部分發(fā)生變化時(shí)它會(huì)通知你。我在最近的平臺(tái)管理開發(fā)中，也用到這個(gè)牛逼哄哄的Angular，在做filter的時(shí)候不可以避免的用到$watch監(jiān)聽。當(dāng)時(shí)我的想法就是搜索的時(shí)候不需要點(diǎn)擊搜索按鈕，這樣在用戶體驗(yàn)上也是極好的，避免了輸入后再次點(diǎn)擊的操作步驟。
然后，當(dāng)$watch監(jiān)聽的時(shí)候一開始代碼是這樣的
$scope.$watch('filterOptions', function (newVal, oldVal) {
if (newVal !== oldVal) {
//filterOptions發(fā)生變化時(shí)，調(diào)用方法
$scope.getPagedDataAsync('admin/bill/'+$stateParams.page+'?pageCount='+$scope.paginationConf.itemsPerPage,$scope.filterOptions);
}
}, true);
這樣做，看上去沒什么大問題，每次輸入的時(shí)候就拉一次數(shù)據(jù)。但是！但是！但是！重要的事情說三遍！當(dāng)用戶輸入“張三”這個(gè)搜索字的時(shí)候，代碼是這樣執(zhí)行的，“張”字拉了一次數(shù)據(jù)，“三”字有拉了一次數(shù)據(jù)。好了嘛，這還是兩個(gè)字，要是輸入十個(gè)字呢，服務(wù)器就哭了，服務(wù)器就來打前端了。
這個(gè)時(shí)候就需要用到Angular中的這貨了——$timeout，他是angular中的一個(gè)定時(shí)器。針對(duì)我們搜索來說，我們?cè)诒O(jiān)聽filterOptions發(fā)生變化時(shí)，不要馬上請(qǐng)求，給他0.8秒的一個(gè)等待的時(shí)間，如果這0.8秒內(nèi)filterOptions沒有又一次發(fā)生變化，那么就請(qǐng)求拉數(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)容，希望能對(duì)大家的學(xué)習(xí)或者工作帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
AngularJS實(shí)現(xiàn)表單驗(yàn)證
客戶端表單驗(yàn)證是AngularJS里面最酷的功能之一。 AngularJS表單驗(yàn)證可以讓你從一開始就寫出一個(gè)具有交互性和可相應(yīng)的現(xiàn)代HTML5表單。在AngularJS中，有許多表單驗(yàn)證指令。在這里，我們將談?wù)剮讉€(gè)最流行指令，然后我們將討論如何編寫自定義的驗(yàn)證。2015-01-01
Angular JS 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。接下來通過本文給大家介紹AngularJS實(shí)用開發(fā)技巧的相關(guān)資料,需要的朋友可以參考下2016-07-07
詳解ionic本地相冊(cè)、拍照、裁剪、上傳（單圖完全版）
本篇文章主要介紹了ionic本地相冊(cè)、拍照、裁剪、上傳（單圖完全版），非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
在JavaScript的AngularJS庫中進(jìn)行單元測(cè)試的方法
這篇文章主要介紹了在JavaScript的AngularJS庫中進(jìn)行單元測(cè)試的方法,主要針對(duì)AngularJS中的控制器相關(guān),需要的朋友可以參考下2015-06-06
這篇文章主要介紹了AngularJS相關(guān)的一些編程思想,AngularJS是一款熱門的JavaScript庫,推薦!需要的朋友可以參考下2015-06-06
Angularjs+bootstrap+table多選（全選）支持單擊行選中實(shí)現(xiàn)編輯、刪除功能
這篇文章主要介紹了Angularjs bootstrap table多選（全選）支持單擊行選中實(shí)現(xiàn)編輯、刪除功能,需要的朋友可以參考下2017-03-03
深究AngularJS中ng-drag、ng-drop的用法
本篇文章主要介紹了深究AngularJS中ng-drag、ng-drop的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧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)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
本篇文章主要介紹了基于AngularJS的拖拽上傳的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07