什么是防抖，什么是节流

防抖

防抖：当事件被触发时，延迟执行事件处理函数，并且在延迟时间内如果事件再次被触发，则重新开始计时。只有当事件在指定的时间内没有再次触发，事件处理函数才会执行。

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

TIP

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

• 适用场景：搜索输入框，窗口调整，表单验证
  在这个例子中，只有在用户停止输入 500 毫秒后，handleSearch 才会被执行，减少了不必要的请求

节流

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

/**
 * 节流函数
 * @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); 
        }
    };
}

使用示例：

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

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

• 适用场景：页面滚动，按钮点击，游戏动画

TIP

省流：防抖就是回城，节流就是技能，快速点击回城，只有最后一次点击才会回城，快速点击技能，技能冷却好之前只能放一次技能