关于防抖以及节流

防抖

• 事件触发后几秒才执行回调，如果在这几秒内重新触发事件，则重新计时
• 实现

function debounce(fn,wait=2000){
    let timer = null //通过闭包保存一个定时器id
    return function(...args){
        if(timer)clearTimeout(timer) // 清除上次设置的定时器
        timer = setTimeout(()=>{
            fn.apply(this,args)
        },wait)
    }
}

// 第一次立即执行，immediate表示是否立即执行
function debounce(fn,wait=2000,immediate){
    let timer = null //通过闭包保存一个定时器id
    return function(...args){
        if(timer)clearTimeout(timer) // 清除上次设置的定时器
        if(immediate && !timer){
            fn.apply(this,args)
        }
        timer = setTimeout(()=>{
            fn.apply(this,args)
        },wait)
    }
}

代码参考# 【进阶 7-2 期】深入浅出防抖函数 debounce

• 总结：防抖就是使用定时器，如果函数执行时不是第一次调用，并且定时器还没结束，那就清除上一个定时器，然后重新设置一个定时器重新定时。

节流

• 规定时间内只触发一次事件，如果多次触发，则只生效一次
• 实现

function throttle(fn,wait=50){
    let pre = 0 //上次执行fn的时间
    return function(...args){
        let now = +new Date() // 获取最新时间戳
        if(now-pre>wait){
            pre = now // 修改上次执行fn的时间
            fn.apply(this,args)
        }
    }
}

代码参考 # 进阶 7-1 期】深入浅出面试必考题 - 节流函数 throttle

• 总结：节流就是通过时间戳来判断是否执行函数，记录上一次执行函数的时间戳，每次执行回调的时候，在回调中判断当前时间戳和上次执行函数的时间戳的时间差来决定是否执行函数