防抖、节流

1、背景

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。

2、防抖

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。防抖函数分为非立即执行版和立即执行版。

（1）非立即执行

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

（2）立即执行

function debounce(fn, delay) {
    let timer = null
    return function () {     
        const self = this
        const args = arguments
        if (timer) clearTimeout(timeout)
        timer = setTimeout(() => {
            timer = null
        }, delay)

        if (!timer) func.apply(self, args)
    }
}

3、节流

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

（1）时间戳版

function throttle (fn, delay) {
    let previous = 0
    return function () {
        const now = Date.now()
        const self = this
        const args = arguments
        if (now - previous > delay) {
            fn.apply(self, args)
            previous = now
        }
    }
}

（2）定时器版

function throttle (fn, delay) {
    let timer = null
    return function() {
        const self = this
        const args = arguments
        if (!timer) {
            timer = setTimeout(() => {
                timer = null
                fn.apply(self, args)
            }, delay)
        }
    }
}