快捷導(dǎo)航

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

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

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

前言

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

然后，當(dāng)$watch監(jiān)聽(tīng)的時(shí)候一開(kāi)始代碼是這樣的

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

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

這個(gè)時(shí)候就需要用到Angular中的這貨了——$timeout，他是angular中的一個(gè)定時(shí)器。針對(duì)我們搜索來(lái)說(shuō)，我們?cè)诒O(jiān)聽(tīng)filterOptions發(fā)生變化時(shí)，不要馬上請(qǐng)求，給他0.8秒的一個(gè)等待的時(shí)間，如果這0.8秒內(nèi)filterOptions沒(méi)有又一次發(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é)

以上就是這篇文章的全部?jī)?nèi)容，希望能對(duì)大家的學(xué)習(xí)或者工作帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

您可能感興趣的文章: