【JavaScript手撕代码】防抖节流

防抖节流设计到的知识点很多，有闭包有修改this指向，应当作为重点记忆

防抖节流

防抖

防抖是指，短时间频繁触发fn，只执行最后一次，这样可以有效提高性能，减少服务器压力

也可以这样表述：函数在 n 秒后再执行，如果 n 秒内被触发，重新计时，保证最后一次触发事件 n 秒后才执行。

/*
* @param {Function} callback 回调函数
* @param {Number} delay 回调函数在delay ms 后执行
* @param {Boolean} immediate 是否立即执行回调
**/
function debounce(callback, delay=300, immediate=false){
	let time = null
    // 返回一个闭包
    return (...args) => {
        // 存在定时器则清空, 重新计时
        if(timer){
            clearInterval(timer)
            timer=null
        }
        // 若不立即执行
        if(!immediate){
            timer = setTimeout(() => {
                callback.apply(this, args)
            }, delay)
        }else{
            // 立即执行
            // timer 为空则代表此时不在delay中, 可以立即执行
            let flag = !timer
            flag && callback.apply(this, args)
            timer = setTimeout(() => {
                timer = null
            }, delay)
        }
    }
}

简单版:

function debounce(callback, delay=300){
    let timer = null
    return (...args) => {
        if(timer){
            clearInterval(timer)
            timer = null
        }
        timer = setInterval(() => {
            callback.apply(this, args)
        }, delay)
    }
}

节流

函数在一段时间内只会执行一次，如果多次触发，那么忽略执行

/*
* @param {Function} callback 执行函数
* @param {Number} delay 
*/
function throttle(callback, delay){
    // 上一次执行时的时间
    let start = Date.now()
    return function(){
        // 这一次触发时的时间
        const now = Date.now()
        // 如果相邻两次触发时间超过设置的delay, 说明已经过了限制时间，可以执行函数
        if(now - start >= delay){
            // 更新start, 方便下次对比
            start = now
            // 执行函数
            return callback.apply(this, arguments)
        }
    }
}