概念
防抖
触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间;
节流
触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,无视触发;
防抖和节流的函数封装
防抖
/*
* fn [function] 需要防抖的函数
* time[number] 毫秒,防抖期限值
*/
//防抖
function debounce(fn,time){
let timer =false;//利用闭包使得外部可以访问timer
return function(){
if(timer){clearTimeout(timer)};//如果timer存在,说明在计时中并且触发了函数,此时应该关闭计时器,下一步重新计时
timer=setTimeout(fn,time);//重新计时
}
}
节流
/*
* fn [function] 需要节流的函数
* time[number] 毫秒,节流期限值
*/
//节流
function throttle(fn,time){
let switch=true;//设定一个开关switch,利用闭包使得外部可以访问switch
return function(){
if(!switch)return;//开关关闭时,退出执行
switch=false;//执行前关闭开关
timer=setTimeout(()=>{
fn();//执行函数
switch=true;//执行结束后打开开关
},time);//重新计时
}
}
应用场景
防抖
- 搜索框input事件,为了防止在输入过程中不断的发送请求,造成页面卡顿,这个时候就需要防抖,在输入完成之后再发送请求;
- onScroll事件,防止滚动浏览器时不断触发加载页面,通常在停止滚动后一段时间再请求数据;
节流
- 注册登录等表单校验事件,防止用户多次点击注册登录,一般在点击注册登录后一段时间无法再次点击,这个时候使用节流;
- 抢购商品时防止多次付款,只在第一次点击时生效;
个人理解
防抖和节流都是js性能优化常见的解决方案,两者从概念上来说,有相似点,也有不同点,很容易造成混淆,我们可以通过现实生活中的例子来帮助理解。
场景一: 等公交车时候,人们排队上车,只有当所有人都上车后,司机才关闭车门,开车。
场景二: 打出租车时,只要有人上了车立马开车,其他人只能等下一辆出租车。
场景一就是防抖,场景二就是节流,开车是执行函数。