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


Posted in Javascript onSeptember 20, 2016

前言

相信使用过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);

总结

以上就是这篇文章的全部内容,希望能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
搞定immutable.js详细说明
May 02 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
jQuery实现的网页换肤效果示例
Sep 20 #Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 #Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 #Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 #Javascript
关于Javascript中defer和async的区别总结
Sep 20 #Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 #Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 #Javascript
You might like
php学习笔记之 函数声明
2011/06/09 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
python pygame模块编写飞机大战
2018/11/20 Python
Python 获取div标签中的文字实例
2018/12/20 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
python占位符输入方式实例
2019/05/27 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
Python对excel的基本操作方法
2021/02/18 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
自荐信需注意事项
2014/01/25 职场文书
幸福家庭标语
2014/06/27 职场文书
校运会广播稿
2015/08/19 职场文书
调研报告的主要写法
2019/04/18 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python