引言

对于短时间内触发频率过高的事件（滚动事件，resize事件，mousemove事件等等），如果处理不当或者放任自流很容易引起浏览器卡死 gameover。

举个栗子

// 效果的话 发挥一下想象力 轻轻一动就触发几十次
let num = 1;
document.body.onmousemove = function () {
    document.body.innerHTML = num ++ ;
}
复制代码

基于上述等类似场景，我们要做出优化，俩种方案：防抖、节流

防抖（debounce）

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

// 防抖
function debounce(fn, delay) {
    let timer;
    return function (args) {
        let that = this;
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.call(that, args);
        }, delay);
    }
}
// 这时候你在划 可以看到事件在停止滑动1s后才会输出  你不停滑动不会输出 （效果你的联想）
let num = 1;
document.body.onmousemove = debounce(function () {
    document.body.innerHTML = num ++ ;
}, 1000);

复制代码

节流（throttle）

所谓节流，就是随便触发事件，但是在 n 秒中只执行一次。

// 节流
function throttle(fn, delay) {
    let flag = true;
    return function (...args) {
        let that = this;
        if(!flag) return;

        flag = false;
        setTimeout(() => {
            fn.call(that, args);
            flag = true;
        }, delay);
    }
}
// 这时候你不停地划 可以看到事件每隔1s输出一次
let num = 1;
document.body.onmousemove = throttle(function () {
    document.body.innerHTML = num ++ ;
}, 1000)
复制代码