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 相关文章推荐
window.js 主要包含了页面的一些操作
Dec 23 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
Vue如何获取数据列表展示
Dec 11 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实现递归无限级分类
2015/10/22 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
js+css3实现旋转效果
2017/01/20 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
js实现点击烟花特效
2020/10/14 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
基于Python实现文件大小输出
2016/01/11 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
电信专业毕业生推荐信
2013/11/18 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
环保公益广告语
2014/03/13 职场文书
美术指导助理求职信
2014/04/20 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书