防抖、节流

如果事件触发是高频但是有停顿时，选择debounce。在事件连续不断高频触发时，选择throttle。

一、防抖(debounce)

防抖就是在事件触发delay秒之后执行回调函数，如果delay秒内事件再次被触发，则会重新计算时间，如果一直触发事件就一直不会执行回调函数。

适用场景：

• scroll事件滚动触发
• 搜索框输入查询
• 表单验证
• 按钮提交事件
• 浏览器窗口缩放，resize事件

function debounce(fn, delay) {
    let timer = null;
    return function() {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(fn, delay);
    }
}

二、节流(throttle)

在函数执行一次之后，将会在delay期间内不再工作，直至过了这段时间才重新生效。

适用场景：

• DOM元素的拖拽功能实现
• 射击游戏类
• 计算鼠标移动的距离
• 监听scroll事件

function throttle(fn, delay) {
    let valid = true;
    return function() {
        if (!valid) {
            return false;
        }
        valid = false;
        setTimeout(() => {
            fn();
            valid = true;
        }, delay);
    }
}