函数节流与防抖

节流和防抖的概念

防抖（debounce）
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
节流（throttle）
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会降低函数的执行频率。

为什么要节流和防抖

• JavaScript是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。
• 对于某些频繁的事件处理会造成性能的损耗，我们就可以通过防抖和节流来限制事件频繁的发生；
  具体实例参考：https://www.jianshu.com/p/c8b86b09daf0

节流和防抖的区别

防抖和节流都是为了防止过于频繁地处理事件，其区别在于：

• 防抖是在触发事件行为（例如Mousemove）停下一定时间（例如100ms）后再去处理事件，它降低了事件触发的次数；
• 节流是把事件触发的频率给降低，默认是鼠标移动一下触发一次事件，通过节流改成按固定时间间隔触发事件。

防抖与节流函数

• 防抖函数：

/*
 * @param fn Function 执行函数
 * @param delay Number 延时时长
 * @param immediate Boolean 是否立即执行，true立即执行
*/
//
function debounce(fn, delay, immediate) {
    let timeout = null
    return function () {
        let context = this //保存指针
        let args = arguments; //保存事件信息$event
        if (timeout) clearTimeout(timeout)
        if (immediate) {
            if (!timeout) {
                fn.apply(context, args)
            }
            timeout = setTimeout(() => {
                timeout = null
            }, delay)
        } else {
            timeout = setTimeout(() => {
                fn.apply(context, args)
            }, delay)
        }
    }
}

• 节流函数：

/*
 * @param fn Function 执行函数
 * @param delay Number 延时时长
 * @param type Number 1代表时间戳版本，其他的是定时器版本
*/
function throttle(fn, delay, type) { 
    let timeout = null, previous = 0
    return function () {
        let context = this
        let args = arguments
        if (type == 1) { //时间戳
            let now = Date.now()
            if (now - previous > delay) {
                fn.apply(context, args)
                previous = now
            }
        } else {
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null
                    fn.apply(context, args)
                }, delay)
            }
        }
    }
}

参考：https://mp.weixin.qq.com/s/qyeRecCBBwa-Zf_V-KIRxA