【性能优化】防抖、节流

debounce（防抖）

触发高频时间后n秒内函数只会执行一次，如果n秒内高频时间再次触发，则重新计算时间。

密集的事件触发，我们只希望触发比较靠后发生的事件，就可以使用防抖函数。

应用场景：

• 输入框中频繁的输入内容，搜索或者提交信息。
• 频繁的点击按钮，触发某个事件。
• 监听浏览器滚动事件，完成某些特定操作。
• 用户缩放浏览器的resize事件。

const debounce = (fn, time) => {
    let timeout = null;
    return function(){
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, time);
    }
}

throttle（节流）

在某个时间内（比如500ms），某个函数只能被触发一次。

依然是密集的事件触发，但是这次密集事件触发的过程，不会等待最后一次才进行函数调用，而是会按照一定的频率进行调用。

应用场景：

• 监听页面的滚动事件。
• 鼠标移动事件。
• 用户频繁点击按钮操作。
• 游戏中的一些设计。

const throttle = (fn, time) => {
    let flag = true;
    return function(){
        if(!flag) return;
        flag = false;
        setTimeout(() => {
            fn.apply(this, arguments);
        }, time);
    }
}