AngularJS中$watch和$timeout的使用示例
更新时间：2016年09月20日 11:45:58 投稿：daisy
这篇文章给大家介绍了AngularJS中$watch和$timeout的使用例子，通过示例代码相信更能让大家理解，有需要的朋友们下面来一起看看吧。
前言
相信使用过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);
总结
以上就是这篇文章的全部内容，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
大家都知道，AngularJS中的$http有很多参数和调用方法，所以本文只记录了比较常用的应用及参数，方便大家以后使用的时候参考学习，下面一起来看看吧。2016-08-08
今天小编就为大家分享一篇angularjs1.5 组件内用函数向外传值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了AngularJS实现页面跳转后自动弹出对话框实例代码，然后在文章下面给大家介绍了angularjs页面加载后自动弹窗的实例代码，感兴趣的朋友参考下吧2017-08-08
下面小编就为大家分享一篇AngularJS中重新加载当前路由页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了深入理解AngularJs－scope的脏检查（一） ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
本文给大家总结了一下在angular中给ng-repeat列表加上动画效果时所遇到的问题及解决方法，推荐给大家，希望大家能够喜欢。2016-02-02
本篇文章主要介绍了浅谈angular4实际项目搭建总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
本篇文章主要介绍了angular.extend方法的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了AngularJS实现tab选项卡的方法,结合实例形式较为详细的分析了AngularJS实现tab选项卡的原理、实现技巧与相关注意事项,需要的朋友可以参考下2017-07-07
AngularJS使用angular-formly进行表单验证
这篇文章主要介绍了AngularJS使用angular-formly进行表单验证的相关资料,需要的朋友可以参考下2015-12-12
最新评论