这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战
函数防抖
函数防抖是什么意思呢，例如我们生活中的电梯，现在大家坐的电梯门都是有一个红外线的，人进去后电梯门会在三秒钟后关闭，然后人进去后后面又有人进来了，电梯又再等三秒钟关闭，也就是说，人进去之后，又有人进来了，那么关闭的行为就消失了，又要重新等待三秒钟再关闭，函数防抖也是差不多的逻辑。函数执行一件事，执行这件事不是立即执行，而是等待一段时间再执行，如果等待这段时间设置的条件又触发了，那么再等一段时间，这就叫做函数防抖。下面我们来看一下代码。
<body>
<input type="text">
<script>
debounce = function (callback, time) {
var timer;
return function (){
clearTimeout(timer);//清除之前的计时
var args = arguments;//利用闭包保存参数
timer = setTimeout(function(){
callback(null,args);
},time);
}
}
//当搜索框停止输入一秒后输出搜索值
var inp = document.querySelector("input");
var handle = debounce(function(val,inp){
console.log("搜索" + inp[0]);
console.log(inp);
},1000);
inp.oninput = function(){
handle(this.value,this);
}
</script>
</body>
日常使用中搜索框使用函数防抖比较多，上面就是搜索框函数防抖的代码，当搜索框停止输入一秒后输出搜索值。
函数节流
函数节流是函数某个时间段内只执行一次，它不会重新计时。下面我们来看一下代码。
<body>
<input type="text">
<script>
throttle = function (callback, time) {
var timer;
return function (){
if (timer) { //如果有计时器直接结束，不再重新计时
return;
}
var args = arguments;//利用闭包保存参数
timer = setTimeout(function(){
callback(null,args);
timer = null;//清空计时器，不然只能运行一次
},time);
}
}
//当搜索框停止输入一秒后输出搜索值
var inp = document.querySelector("input");
var handle = throttle(function(val,inp){
console.log("搜索" + inp[0]);
console.log(inp);
},1000);
inp.oninput = function(){
handle(this.value,this);
}
</script>
</body>
上面就是搜索框函数节流的代码，当搜索框输入中每一秒输出搜索值。
