提到JavaScript的节流防抖，初级前端估计头疼的要命，这这这，写着这么麻烦？js节流防抖有什么用？谁设计出来的？最近七娃一直在刷面试题，刷完原型和原型链，就看了闭包，闭包之后就回顾今天的节流防抖，才发现终于找到了正确的学习js的路线！JavaScript的节流防抖就是闭包函数实现的！

面试题十二：手写|谈谈JavaScript的节流防抖-QUI-Notes

函数防抖原理及实现方式

防抖原理：

函数在n秒之内只能执行一次，如果事件触发后，n秒内事件又被触发，那么就会重新计算延时时间。

防抖作用:

防止事件被频繁触发，一定时间内支触发一次。提高浏览器资源利用率和速度，防止过分消耗浏览器内存。
 

防抖实现：

function debounce(fn,time){
let timer = null;
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(function(){
fn.apply(this,arguments)
},time) 
}
}

函数节流原理及实现方式 

节流原理：

函数在指定的周期内只执行一次。

节流作用：

防止事件一直处于执行防抖状态，没有被执行，而导致长期没有结果反馈。

节流实现：

function throttle(fn,time){
let flag = false;
return function(){
if(flag){
return
}
flag = true;
setTimeout(function(){
fn.apply(this,arguments);
flag = false;
},time)
}
}

节流防抖场景：

1.搜索框；
2.滚动加载；
3.懒加载；
4.键盘弹起；
....