前端节流与防抖

介绍

前端节流（throttling）和防抖（debouncing）是两种常用的优化前端性能的技术。它们都用于控制事件的触发频率，减少不必要的计算和网络请求，提高页面的响应速度和用户体验。

节流

节流（throttling）是指在一定时间间隔内只触发一次事件。当事件频繁触发时，节流会忽略后续的事件，直到过了设定的时间间隔才再次触发事件。例如，当用户连续滚动页面时，节流可以限制滚动事件的触发频率，避免过多的滚动事件导致页面卡顿。常见的实现方式是使用定时器来延迟触发事件。

代码实现

function throttle(func, ms) {
    let timeout;
    return function (...args) {
        if (!timeout) {
            timeout = setTimeout(() => {
                fn.apply(this, args);
                timeout = null;
            }, ms)
        }
    }
}

防抖

防抖（debouncing）是指在事件触发后等待一段时间，如果在这段时间内没有再次触发事件，则执行相应的操作。如果在等待期间再次触发了事件，则重新计时。防抖通常用于处理用户输入的场景，比如输入框搜索建议、输入框自动保存等。防抖可以有效地减少频繁触发的事件对性能的影响。常见的实现方式是使用定时器，在事件触发时先清除之前的定时器，然后重新设置一个新的定时器。

代码实现

function debounce(func, ms) {
    let timeout;
    return function (...args) {
        timeout && clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), ms);
    };
}