前言：接到过这样一个任务，是做一个客户预约信息的填写界面，里面很多信息必须要填写。而设计那边提出要让所有信息都要有填写才能让“确认登记”按钮变颜色，并变得可以点击。
问题就来了，如果用户每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次。减少了多次的事件触发。！！