海上灵光 - Wynn

在前端开发中，事件处理和函数调用的频率控制是提升用户体验和优化性能的重要手段。其中，“防抖”和“节流”是两种常见的技术，用于控制函数执行的频率，以避免过度消耗资源或导致不必要的计算。本文将深入探讨这两种技术的原理、实现方法以及应用场景。

1. 理解防抖

1.1 定义

防抖(Debounce)是一种函数调用策略，其核心思想是在一系列连续触发的事件中，只有当最后一次事件触发后的一段时间内没有新的事件发生时，才会执行相应的函数。这通常用于避免短时间内大量重复调用同一函数的情况。

例如，用户在搜索框中输入文字时，如果每次按键都触发一次搜索请求，会导致大量的请求发送到服务器，影响性能。通过防抖技术，只有在用户停止输入一段时间后，才会发送搜索请求，从而减少请求次数，提高性能。

1.2 实现方式

从上文的例子中我们可以抽象出防抖的实现方式。首先，当用户停止输入一段时间后才触发搜索，那么可以通过设置一个定时器来实现，当延时结束后执行函数。

在这种情况下，如果用户持续输入，就会不断地产生定时器。因此，在用户输入时清除已经存在的定时器，并重新设置一个新的定时器。这样，用户的最后一次输入一定会存在一个定时器来确保延时触发函数执行。

防抖可以通过设置一个定时器来实现。每次事件触发时，如果定时器已经存在，则清除它；然后重新设置一个新的定时器，在设定的延迟时间结束后执行函数。这样可以确保函数只在最后一次事件触发后的延迟时间结束后执行一次。

/**
 * @param {Function} func 需要防抖的函数
 * @param {number} wait 延迟时间，单位为毫秒
 */
function debounce(func, wait) {
    // 定时器
    let timeout;
    return function(...args) {
        // 清除定时器
        clearTimeout(timeout);
        // 设置定时器
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

使用示例：

// 模拟一个搜索请求
function search(query) {
  console.log('Searching for:', query);
}

// 使用防抖函数包装
const debouncedSearch = debounce(search, 300);

// 绑定到输入框的输入事件
document.getElementById('search-input')
        .addEventListener('input', (event) => {
            debouncedSearch(event.target.value);
        });

1.3 应用场景

用户输入搜索框中的文本时，频繁触发的oninput事件。
拖拽元素时，连续的ondrag事件。
窗口大小改变时，连续的onresize事件。

2. 探索节流

2.1 定义

节流(Throttle)是对函数执行频率的一种限制，它保证函数在一定时间内最多执行一次，用来降低高频执行动作的频率。与防抖不同，即使在指定的时间间隔内有多个事件触发，节流也能确保函数至少执行一次。

例如，在滚动页面时，如果onscroll事件触发的频率过高，会导致页面卡顿。通过节流技术，可以限制onscroll事件在指定时间内最多触发一次，从而提高页面性能。

2.2 实现方式

同样地，我们根据页面滚动的例子来分析节流的实现。首先，当滚动动作首次触发时，要执行一次函数，确保首次执行效果。其次，当第二次触发动作时，需要判断是否在规定时间内，如果在节流时间内则忽略，否则就执行一次函数。

这种思路下，可以通过时间戳来时间。

/**
 * @param {Function} func 需要节流的函数
 * @param {number} limit 间隔时间，单位为毫秒
 */
function throttle(func, limit) {
    // 上次执行时间
    let lastTime = 0;

    return function(...args) {
        const now = Date.now();
        const context = this;

        if (now - lastTime >= limit) { // 超出时间间隔，执行函数
            func.apply(context, args);
            lastTime = now;
        }
        // 未超出时间间隔，忽略
    };
}

这种实现方式比较简单，但是实际过程中可能存在问题。

因此，我们需要考虑最后一次的触发情况。可以设置一个定时器，来保证最后一次事件也能在延迟后执行。另外，当事件频繁触发时，需要清除存在的定时器并重新设置。基于以上代码，可以优化得到新的实现方式。

/**
 * @param {Function} func 需要节流的函数
 * @param {delay} limit 间隔时间，单位为毫秒
 */
function throttle(func, limit) {
    let timeout = null;
    let lastExec = 0;

    return function(...args) {
        const context = this;
        const now = Date.now();

        if (lastExec === 0) {
            func.apply(context, args);
            lastExec = now;
        } else {
            const remaining = limit - (now - lastExec);

            if (remaining <= 0) {
                func.apply(context, args);
                lastExec = now;
            } else {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    func.apply(context, args);
                    lastExec = Date.now();
                }, remaining);
            }
        }
    };
}

使用示例：

// 假设这是我们要执行的函数
function handleScroll() {
  console.log('Scroll event handler');
}

// 使用节流函数包装
const throttledScroll = throttle(handleScroll, 200);

// 绑定到滚动事件
window.addEventListener('scroll', throttledScroll);

2.3 应用场景

滚动页面时，频繁触发的onscroll事件。
鼠标移动时，连续的onmousemove事件。
监听网络请求的频率，避免过快的请求导致服务器压力过大。

3. 总结

防抖和节流都是前端开发者必须掌握的技术，它们能有效减少不必要的计算和资源消耗，提高应用程序的性能和响应速度。在实际项目中，根据不同的需求选择合适的方法，可以显著提升用户体验。

通过本文的介绍，相信你对防抖和节流有了更深入的理解。在未来的开发中，不妨尝试运用这些技巧，让你的应用更加高效、流畅。