前端防抖与节流

 防抖（debounce）：像电梯，每次进去就重新计算关闭的时间

节流（throttle）：像高铁，只在规定时间内开启阀门

const btn = document.querySelector('button')
const fn = ()=>{
    console.log('点击了');
}

//防抖：像电梯，每次进去就重新计算关闭的时间（用户操作相当于进电梯，关闭电梯则触发fn）
const debounce = (delay,fn)=>{
    let timer = null;
    return ()=>{
        clearTimeout(timer)//清除上一个计时器
        //重新开始计时
        timer = setTimeout(() => {
            fn()
        }, delay);
    }
}
//测试防抖效果：2s间隔内点击，不触发fn；点击后停留2s，触发fn
// btn.addEventListener("click",debounce(2000,fn))

//节流：像高铁，只在规定时间内开启阀门（用户首次操作即高铁开门时间，开门期间只能触发1次fn）
const throttle = (delay,fn)=>{
    let flag = true;//开启阀门
    let timer  = null;
    return ()=>{
        if(flag){
            flag = false//进来了，关闭阀门
            clearTimeout(timer)
            fn()
            timer = setTimeout(() => {
                flag = true//结束，开启阀门
            }, delay);
        }
    }
}
//测试节流效果：2s内多次点击，只能触发1次fn
btn.addEventListener("click",throttle(2000,fn))