前言:这其实是我两年前写的了。在某云笔记上,整理发到博客上,分享查阅方便。防抖与节流是前端面试中的高频题,需要理解透哦!
防抖
Q:简述什么是防抖?
A:在第一次触发事件时,不立即执行函数,若计时器的时间间隔之内没有再次触发事件就执行;在计时器时间间隔内又触发新的事件,会清除计时器,重新计时。
function debounce(fn,delay){
timer=null;
return ()=>{
if(timer){
clearTimeout(timer);
}
timer= setTimeout(fn,delay);//要加timer=
}
}
// window.addEventListener('scroll',debounce(showTop,1000));
window.onscroll=debounce(showTop,1000);
扩充:React中的防抖怎么封装?如何自定义一个防抖Hook?
应用场景:搜索框,一定时间内再触发就要重新计时,以最新的条件去查询结果。
节流
Q:什么是节流?
A:定义了标志变量。第一次触发的事件正在执行时,计时器设定时间内又触发新的事件,不会再执行。
function throttle(fn,delay){
flag = true;//设定可以执行
return ()=>{
if(!flag)
{
return;
}
flag=false;//设置执行期间状态为无效,不可以执行新的触发事件
setTimeout(()=>{
fn();
flag=true;//执行之后状态恢复
},delay);
}
}
window.onscroll=throttle(showTop,1000);
setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行。
它在"任务队列"的尾部添加一个事件,因此要等到同步任务和"任务队列"现有的事件都处理完,才会被执行。
用于测试防抖、节流的函数
var box=document.getElementsByClassName("box")[0];
window.addEventListener('scroll',showTop);
function showTop(){
var scrollTop=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop;
console.log("滚动条的位置:"+scrollTop)
}
/*
* fn [function] 需要防抖/节流的函数
* delay [number] 毫秒,防抖期限值
*/
应用场景后续补充,时间来不及了,可先收藏~