节流函数的两种实现方式

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

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

时间戳版

function throttle(func, wait) {
    // 时间戳版
    let previous = 0;
    return function () {
        let now = new Date();
        if (now - previous > wait) {
            previous = now;
            func.apply(this, arguments)
        }
    }
}

时间戳版没有用到定时器，所以不需要再声明一个this变量。

定时器版

function throttle(func, wait) {
    // 定时器版
    let timer;
    return function () {
        let context = this;
        if (!timer) {
            timer = setTimeout(() => {
                timer = null;
                func.apply(context, arguments)
            }, wait)
        }
    }
}

节流的应用场景

射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
搜索联想（keyup）
监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次