手写防抖和节流函数

本章主要讲解：防抖和节流的实现和应用场景

手写防抖和节流函数

「节流throttle」，规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。场景👇

• scroll滚动事件，每隔特定描述执行回调函数
• input输入框，每个特定时间发送请求或是展开下拉列表，（防抖也可以）

节流重在加锁「flag = false」

function throttle(fn, delay) {
    let flag = true,
        timer = null
    return function(...args) {
        let context = this
        if(!flag) return
        
        flag = false
        clearTimeout(timer)
        timer = setTimeout(function() {
            fn.apply(context,args)
            flag = true
        },delay)
    }
}

「防抖debounce」,在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。场景👇

• 浏览器窗口大小resize避免次数过于频繁
• 登录，发短信等按钮避免发送多次请求
• 文本编辑器实时保存

防抖重在清零「clearTimeout(timer)」

function debounce(fn, delay) {
    let timer = null
    return function(...args) {
        let context = this
        if(timer) clearTimeout(timer)
        timer = setTimeout(function(){
            fn.apply(context,args)
        },delay)
    }
}

总结：节流用于用户主动触发的操作，防抖用于用户不知道的情况下定时触发