前言:接到过这样一个任务,是做一个客户预约信息的填写界面,里面很多信息必须要填写。而设计那边提出要让所有信息都要有填写才能让“确认登记”按钮变颜色,并变得可以点击。
问题就来了,如果用户每onkeyup一次我就去判断->所有input标签的value值是否为空,那用户填写一遍下来,估计事件要触发四五百次,这是多么恐怖的一件事情和资源浪费!!。
一、问题起始
<body> <input type="text"/> <script> var i = 1; var oInput = document.getElementsByTagName('input')[0]; document.addEventListener('keyup',function(){ console.log('敲击键盘了' + i++); }); </script> </body>
运行程序,输入1-9
这时事件已经触发了9次了。
二、解决方案(定时器延迟调用)
<input type="text"/> <script> var i = 1; var oInput = document.getElementsByTagName('input')[0]; document.addEventListener('keyup',debounce(function(){ console.log('敲击键盘了' + i++); })); function debounce(fn){ var timer; return function(){ var that = this; //防止定时器中的this变成window对象了 var args = arguments; //获取函数参数 if(timer){ //当定时器里的函数还未运行,会走里面,清除即将触发的定时器 clearTimeout(timer); } timer = setTimeout(function(){ timer = null; fn.apply(that,args); //用apply调用函数 },500); } } </script>
运行程序,输入1-9
这时事件只触发了1次。减少了多次的事件触发。!!