防抖和节流

防抖和节流是什么

防抖和节流都是性能优化的一种手段

防抖: 一直触发事件不执行,不触发后一段时间再执行

节流: 一直触发事件会执行,只是执行频率变低了

应用场景

防抖: 例如 根据输入框内容请求数据

节流: 例如 滚动条滚动获取位置

封装

// 防抖
const debounce = (fn,time) => {
    let timer = null
    return function(...argus) {
        clearTimeout(timer)
        timer = setTimeout(() => {
            fn.call(this,...argus)
        },time)
    }
}

// 节流
const throttle = (fn,time) => {
    let bBar = true
    return function(...argus){
        if(!bBar) return
        bBar = false
        setTimeout(() => {
            fn.call(this,...argus)
            bBar = true
        },time)
    }
}

替代方案

lodash 中的 _.debounce() --- 防抖 和 _.throttle() --- 节流