什么是防抖和节流？

简介

虽然二者都有延迟当前动作的反馈，但是防抖的延迟时间是确定的，延迟周期内如果有新动作进入，旧的动作将会被取消。

而节流是提前设置了一个阀门，只有当阀门打开的时候，该动作才有机会执行。如果阀门是关闭的，那这个动作就不会进入执行区。个人理解防抖是后置的处理高频事件方式，而节流是前置处理。防抖机制隐含了一个优先级的概念，后到的先执行，因此事件的进入事件越晚优先级实则越高，而优先级最高的具备执行权，而进入时间这个准入条件是不由开发者提前预设的，事件的执行更加离散无规则。而缓冲机制并没有为事件分配权重，只是设置了一个均匀频率的信号量，该信号量的开启和关闭是决定能否进入执行区的条件，而与事件无关，准入条件是人为设置的，相对来说执行更规律。

带有立即执行的防抖实现

/**
 * 带有立即执行的防抖
 * @param {*} fn 
 * @param {*} wait 
 * @param {*} immediate 
 */
function debounce(fn, wait = 50, immediate = true) {
    let args
    let self
    let timer
    let delay = () => {
        return setTimeout(() => {
            timer = null
            if (!immediate) {
                fn.apply(self, args)
            }
        }, wait);
    }
    return function (...params) {
        if (!timer) {
            timer = delay()
            if (immediate) {
                fn.apply(this, params)
            } else {
                args = params
                self = this
            }
        } else {
            clearTimeout(timer)
            timer = delay()
        }
    }
}
debounce(()=>{console.log(1)},50,false)()

节流实现

const throttle=(fn, wait = 50)=>{
    let isCan=true
    return function(){
        if(!isCan) return
        isCan=false
        setTimeout(() => {
            fn.apply(this, arguments);
            isCan=true
        }, wait);
    }
}
let func = throttle(()=>{console.log(1)},1050)
func()
func()