防抖和节流

防抖（debounce）

所谓防抖，是指触发某一个事件后，在n秒内函数只能执行一次，如果在n秒内再一次触发了事件，则会重新计算函数的执行时间

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

<!-- 接下来所有的防抖函数的测试皆由此html测试 -->
<span id="count">当前数字为：0</span>
<button id="debounceBtn"> debounce防抖按钮 </button>

非立即执行函数

非立即执行版的防抖函数是指在触发时间后并不会立即执行，而是在n秒后第一次执行，再一次在n秒内触发这个事件，则会重新的计算函数的执行时间。

/**
 * @param func 函数
 * @param wait 延时执行时间
 */

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);
    }
}

编写测试js代码：

let debounceBtn = document.getElementById('debounceBtn');
let countSpan = document.getElementById('count');
let count = 0;

debounceBtn.onclick = debounce(function() {
    count++;
    countSpan.innerText = '当前数字为： ' + count;
}, 500);

运行结果：

立即执行版

立即执行版的防抖函数是指触发某一个事件时，会立即执行防抖函数，然后在n秒内再一次触发事件，会重新计算函数的执行时间。

/**
 * @param func 函数
 * @param wait 延时执行时间
 */
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);
    }
}

使用上面的测试方法，得到的效果如下：

在通常的开发过程中，我们一般都是通过不同的场景来决定使用哪一种的防抖函数。但为了避免多次的开发，反复的使用。为了懒也得把这两个来一个结合。然后，下面他就来了。

/**
 * @param isImme 判断为哪一种执行方式； true: 立即执行 false: 非立即执行
 * @param func 函数
 * @param wait 延时执行时间
 */

function debounce(func, wait, isImme) {
    let timeout;

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

        if (timeout) clearTimeout(timeout);

        if (isImme) {
            let callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait);
            if (callNow) func.apply(context, args);
        } else {
            timeout = setTimeout(() => {
                func.apply(context, args);
            }, wait);
        }
    }
}

节流（throttle）

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

节流也有两种实现的方法，一种是通过时间戳来控制，另一种是通过定时器来控制。

时间戳版

/**
 * @param func 函数
 * @param wait 延时执行时间
 */
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;
        }
    }
}

使用方式如同防抖，下面则是节流的使用：

let debounceBtn = document.getElementById('debounceBtn');
let countSpan = document.getElementById('count');
let count = 0;

debounceBtn.onclick = throttle(function() {
    count++;
    countSpan.innerText = '当前数字为：' + count;
}, 500);

使用效果如下：

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

定时器版

/**
 * @param func 函数
 * @param wait 延时执行时间
 */
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);
        }
    }
}

使用方法同上，效果如下：

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

在此，我们很容易发现，其实时间戳版和定时器版有明显的不同。而区别就在于：时间戳版的函数触发实在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。

在最后，就像防抖一样，我们也把节流的两种方法结合起来吧！

/**
 * @param {Function} func 函数方法
 * @param {Number} wait 延迟执行时间
 * @param {Number} 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);
                })
            }
        }
    }
}

参考地址： https://www.jianshu.com/p/c8b86b09daf0