angularJS $watch $timeout 使用心得

<span style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">在使用angular时我们必不可少的会用到$watch ,angular在实现数据双向绑定时就已经再调用$watch了，</span><span style="font-size: 13.3333px; font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">$watch可以 监听任意模型ng-model,我们对该model修改时，就会调用相应的$watch进行监听 ，$timeout呢 有相当于angualr的定时器，我们把两个结合一下可以做出来 一个，监听input 且防抖动的效果，所谓防抖动，也就是数据延时提交，我们在input修改完之后，设置一定的延迟时间，等待用户再次输入 如果超出延迟时间用户还没有再次输入，我们就将数据提交。</span>

$scope.$watch('filterOptions', function (newVal, oldVal) {if (newVal !== oldVal) {if (timeout) $timeout.cancel(timeout); //如果当前时间已经有一个timeout在开启，那么先取消掉这个开启的timeouttimeout = $timeout(function() {$scope.getPagedDataAsync('admin/bill/'+$stateParams.page+'?pageCount='+$scope.paginationConf.itemsPerPage,$scope.filterOptions);}, 800);}}, true);

后来我发现我可以代替这个timeout功能，我自己写了一个类似的功能方法供大家参考：

<!-- $watch 模型监控 -->
myApp.controller('myWatch',function($scope,$timeout){$scope.name='nihao';$scope.updated='-1';var timeout='';var executeTime='';$scope.$watch('name',function(){var currentTime = (new Date()).valueOf();console.log("上次执行时间"+executeTime);if ((currentTime-executeTime)<2000||executeTime=='') {executeTime=currentTime;return; };executeTime=currentTime;$scope.updated++;});
});

html

<!-- $watch 模型监控 --><br>模型监控<br> <div ng-controller="myWatch"><input ng-model="name" />Name updated: {{updated}} times.</div>

提交数据也就是，我这里用简单的update（修改次数）自增来代替在页面上显示的效果就是当用户输入一个字符，并且在两秒内不在做操作时，update记录一次修改次数

angularJS $watch $timeout 使用心得相关推荐

SQL Server 连接字符串和身份验证学习
SQL Server .NET Data Provider 连接字符串包含一个由一些属性名/值对组成的集合.每一个属性/值对都由分号隔开. PropertyName1=Value1 ...
asp.net数据库连接web.config配置
本文来自博客园 mile ,转载请详细标明作者及出处,以示尊重! 作者:mile 原文:http://www.cnblogs.com/lhws/archive/2012/03/15/2397937. ...
SQL Server 连接字符串和身份验证
SQL Server .NET Data Provider 连接字符串包含一个由一些属性名/值对组成的集合.每一个属性/值对都由分号隔开. PropertyName1=Value1 ...
mysql主从数据库含义_(转)Mysql数据库主从心得整理
管理mysql主从有2年多了,管理过200多组mysql主从,几乎涉及到各个版本的主从,本博文属于总结性的,有一部分是摘自网络,大部分是根据自己管理的心得和经验所写,整理了一下,分享给各位同行,希望对 ...
山石网科-Hillstone-IPsec V_P_N常见故障debug排错心得终结版
嗨,各位好. 相信各位过来点开的时候会鄙视一句"这厮,又来搞山石了",哈哈没错,这次确实又来了,不过这次带了点排错的心得过来,希望给未来在常见的配置过程当中,不知道怎么排错时候有些 ...
System.Threading.Timer使用心得
System.Threading.Timer使用心得 2008-11-20 00:09 System.Threading.Timer 是一个使用回调方法的计时器,而且由线程池线程服务,简单且对资源要求 ...
android pppd流程,pppd调试心得.md
描述 pppd是用于驱动3g模块的一种方式,其本质是和运营商APN协商,建立连接其与运营商之间使用ppp协议,而用户在应用层使用系统提供的socket即可,从而忽略底层使用的时何种接口的设备,避免因 ...
关于DIY eGPU的使用配置心得
eGPU配置文件路径: V:\configstartup.bat 内容如下:(与其说是心得,不如说是自己配置后体验的效果,来翻译一下下面英文会给显卡带来什么样的表现) :::::::::::::::: ...
微信小程序开发总结与心得(一)
Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 0 前言最近的工作重心一直在小 ...

angularJS $watch $timeout 使用心得

angularJS $watch $timeout 使用心得相关推荐

最新文章

热门文章