防抖（Debounce）和节流（Throttle）

一、防抖（Debounce）

1.1 什么是防抖？

防抖是一种延迟执行的技术。它的原理是，当事件被触发时，延迟执行事件处理函数，并且在延迟时间内如果事件再次被触发，则重新开始计时。只有当事件在指定的时间内没有再次触发，事件处理函数才会执行。这样可以避免某些高频率的操作被频繁触发，从而提高性能。

1.2 适用场景

防抖主要适用于那些在用户停止操作后才需要执行的场景，例如：

搜索输入框：用户在输入时，连续触发 keyup 事件，只有在输入结束后才发送请求。
窗口调整：用户调整浏览器窗口大小时，频繁触发 resize 事件。防抖可以确保调整结束后再执行相应操作。
表单验证：用户输入表单数据时，可以用防抖来减少频繁的验证请求。

1.3 防抖的实现

下面是一个 JavaScript 的防抖实现示例：

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

解释：

debounce 函数接收两个参数：func 是需要执行的函数，wait 是延迟的时间。
每次触发事件时，先清除上一次的 timeout，然后重新设置一个新的定时器。
只有在指定的 wait 时间内没有新的事件触发时，func 才会被执行。

1.4 使用示例

假设我们在一个搜索输入框中使用防抖来减少请求次数：

const searchInput = document.getElementById('search');
const handleSearch = debounce(function() {
    console.log('Sending request for:', this.value);
}, 500);
 
searchInput.addEventListener('keyup', handleSearch);

在这个例子中，只有在用户停止输入 500 毫秒后，handleSearch 才会被执行，减少了不必要的请求。

二、节流（Throttle）

2.1 什么是节流？

节流是一种限制函数执行频率的技术。它的原理是，当事件被频繁触发时，函数会按照一定的时间间隔执行，而不是每次触发事件都执行。换句话说，在一个时间段内，只会执行一次事件处理函数。

2.2 适用场景

节流适用于需要间隔时间执行的场景，例如：

页面滚动：用户滚动页面时触发 scroll 事件，使用节流限制处理函数的执行频率。
按钮点击：防止用户短时间内多次点击同一个按钮，造成重复提交。
游戏动画：限制每秒渲染的帧数，以减少资源消耗。

2.3 节流的实现

下面是一个 JavaScript 的节流实现示例：

/**
 * 节流函数
 * @param {Function} func - 需要节流的函数
 * @param {number} wait - 时间间隔（毫秒），表示在这个时间间隔内最多执行一次函数
 * @returns {Function} - 返回一个节流后的函数
 */
function throttle(func, wait) {
    // 上一次执行函数的时间戳，初始值为 0
    let lastTime = 0;
 
    // 返回一个闭包函数，作为节流后的函数
    return function (...args) {
        // 获取当前时间戳
        const now = Date.now();
 
        // 如果当前时间与上一次执行时间的差值大于等于 wait，则执行函数
        if (now - lastTime >= wait) {
            // 更新上一次执行函数的时间戳
            lastTime = now;
            // 调用原始函数，并传入参数
            func.apply(this, args);
        }
    };
}

2.4 使用示例

下面是一个使用节流限制 scroll 事件处理频率的例子：

// 原始的滚动事件处理函数
function handleScroll() {
    console.log('Scroll event triggered');
}
 
// 使用节流函数包装 handleScroll
const throttledScrollHandler = throttle(handleScroll, 200);
 
// 监听滚动事件，并使用节流后的函数
window.addEventListener('scroll', throttledScrollHandler);

在这个例子中，handleScroll 函数会在每次滚动时执行，但每隔一段时间只会执行一次，即使 scroll 事件在这段时间内被频繁触发。

三、防抖与节流的区别