防抖:在限定时间内,总是执行最后一次。

节流:在限定时间内,只会执行第一次。

  • fn [function] 需要防抖的函数
  • delay [number] 毫秒,防抖期限值

防抖

function debounce(fn,delay){
    let timer = null //借助闭包return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
            timer = setTimeout(fn,delay) 
        }else{
            timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时,那么就开始一个计时
        }
    }
}

节流

function throttle(fn,delay){
 let valid = true
 return function() {
    if(!valid){
        //休息时间 暂不接客
        return false 
    }
    // 工作时间,执行函数并且在间隔期内把状态位设为无效
     valid = false
     setTimeout(() => {
         fn()
         valid = true;
     }, delay)
 }
}
最后修改:2022 年 01 月 09 日