函数防抖和节流

motioliang2019-1-20jsjs

在前端开发中会遇到一些频繁的事件触发，比如：
window 的 resize、scroll
mousedown、mousemove
keyup、keydown ... 通常这种情况下我们怎么去解决的呢？一般来讲，**防抖和节流 **是比较好的解决方案。让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。

我们写个 index.html 文件：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>debounce</title>
    <style>
        #container{
            width: 100%; height: 200px; line-height: 200px; text-align: center; color: #fff; background-color: #444; font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script>
        let num = 1;
        let content = document.getElementById('container');

        function count() {
            content.innerHTML = num++;
        };
        content.onmousemove = count;
    </script>
</body>

</html>

在上述代码中，div 元素绑定了 mousemove 事件，当鼠标在 div（灰色）区域中移动的时候会持续地去触发该事件导致频繁执行函数。效果如下

可以看到，在没有通过其它操作的情况下，函数被频繁地执行导致页面上数据变化特别快。

为了解决这个问题，一般有两种解决方案：

debounce 防抖
throttle 节流

防抖（debounce）所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

防抖函数分为非立即执行版和立即执行版。

非立即执行版：

function debounce(func, wait) {
    let timeout
    return function () {
        let context = this
        let args = arguments

        if (timeout) clearTimeout(timeout)

        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait)
    }
}

非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

我们依旧使用上述绑定 mousemove 事件的例子，通过上面的防抖函数，我们可以这么使用

content.onmousemove = debounce(count, 1000)

在触发事件后函数 1 秒后才执行，而如果我在触发事件后的 1 秒内又触发了事件，则会重新计算函数执行时间。效果如下：

上述防抖函数的代码还需要注意的是 this 和参数的传递

let context = this
let args = arguments

防抖函数的代码使用这两行代码来获取 this 和参数，是为了让 debounce 函数最终返回的函数 this 指向不变以及依旧能接受到 e 参数。

立即执行版：

function debounce(func, wait) {
    let timeout
    return function () {
        let context = this
        let args = arguments

        if (timeout) clearTimeout(timeout)

        let callNow = !timeout
        timeout = setTimeout(() => {
            timeout = null
        }, wait)

        if (callNow) func.apply(context, args)
    }
}

立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

在开发过程中，我们需要根据不同的场景来决定我们需要使用哪一个版本的防抖函数，一般来讲上述的防抖函数都能满足大部分的场景需求。但我们也可以将非立即执行版和立即执行版的防抖函数结合起来，实现最终的双剑合璧版的防抖函数。

双剑合璧版：

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
function debounce(func, wait, immediate) {
    let timeout

    return function () {
        let context = this
        let args = arguments

        if (timeout) clearTimeout(timeout)
        if (immediate) {
            var callNow = !timeout
            timeout = setTimeout(() => {
                timeout = null
            }, wait)
            if (callNow) func.apply(context, args)
        } else {
            timeout = setTimeout(function () {
                func.apply(context, args)
            }, wait)
        }
    }
}

节流（throttle）所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

时间戳版：

function throttle(func, wait) {
    let previous = 0
    return function () {
        let now = Date.now()
        let context = this
        let args = arguments
        if (now - previous > wait) {
            func.apply(context, args)
            previous = now
        }
    }
}

使用方式如下

content.onmousemove = throttle(count, 1000)

效果演示如下：

可以看到，在持续触发事件的过程中，函数会立即执行，并且每 1s 执行一次。

定时器版：

function throttle(func, wait) {
    let timeout
    return function () {
        let context = this
        let args = arguments
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null
                func.apply(context, args)
            }, wait)
        }
    }
}

使用方式同上，效果如下

可以看到，在持续触发事件的过程中，函数不会立即执行，并且每 1s 执行一次，在停止触发事件后，函数还会再执行一次。

我们应该可以很容易的发现，其实时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。

/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 */
function throttle(func, wait, type) {
    if (type === 1) {
        let previous = 0
    } else if (type === 2) {
        let timeout
    }
    return function () {
        let context = this
        let args = arguments
        if (type === 1) {
            let now = Date.now()

            if (now - previous > wait) {
                func.apply(context, args)
                previous = now
            }
        } else if (type === 2) {
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null
                    func.apply(context, args)
                }, wait)
            }
        }
    }
}