防抖和节流

防抖(debounce)

防抖即防止抖动，避免把一次事件误认为多次，应用的场景有：

• 登录，发短信，抢购按钮避免用户点击过快导致发送多次请求
• 调整浏览器窗口大小
• 在线编辑器停止输入后一定时长保存内容
• 实时输入搜索
• ...

防抖的重点在于清零，将之前所有的操作清零，只保留最后一次操作。

function debounce(fn, wait) {
    let timer;
    return (...args) => {
        clearInterval(timer);
        timer = setTimeout(() => {
            fn(...args);
        }, wait);
    }
}

节流(throttle)

节流的主要目的在于降低频率，将高频事件转换为低频事件。应用场景有：

• scroll事件
• 轮播图的点击切换
• 播放事件，每一秒计算进度信息
• ...

节流的重点在于加锁，一定时间段内只触发一次操作。

function throttle(fn, wait) {
    let timer = null;
    return (...args) => {
        if (timer !== null) return;
        timer = setTimeout(() => {
            fn(...args);
            timer = null;
        }, wait);
    }
}

[参考资料] https://q.shanyue.tech/fe/js/3.html