前端面试中常问的防抖和节流
程序员文章站
2022-06-09 21:40:03
...
- 防抖
应用场景:
(1) keyup 事件
(2)调整窗口大小
原理:假设等待时间为500ms,如果500ms之内有请求,则计时器清零重新开始计时,直到500ms之内没有请求,则执行函数。
function debounce(fn,wait){
let timer=null;
return function(...args){
if (timer){
clearTimeout(timer)
}
else{
}
timer=setTimeout(() =>{
fn.apply(this,args)
},wait)
}
}
- 节流
应用场景:
(1)鼠标不断点击触发
(2)监听滚动事件
原理:假设等待时间为500ms,如果500ms之内有多个请求,忽视500ms之内除了第一次请求的请求,在500ms后触发回调函数执行。
function throttle(fn,wait){
let timer=null;
return function(...args){
if (timer) return;
timer=setTimeout(()=>{
fn.apply(this,args)
timer=null;
},wait)
}
}
上一篇: 前端面试系列-JavaScript-防抖与节流(用节流优化防抖)
下一篇: 静态代理和动态代理