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

面试题十二:手写|谈谈JavaScript的节流防抖-Qui-Note

函数防抖原理及实现方式

防抖原理:

函数在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.键盘弹起;
....