防抖和节流的理解

---

前言

防抖（Debounce）和节流（Throttle）是前端开发中常用的两种优化技术，主要用于优化一些触发频率很高的事件（如窗口调整、鼠标移动、键盘输入、按钮触发等），以避免因事件频繁触发导致的性能问题。它们的核心区别在于对事件触发的处理方式不同。

---

一、 防抖（Debounce）

防抖的思想是：在事件被触发后，延迟指定时间才执行事件处理函数，如果在这段时间内事件再次被触发，则重新计时。

1、原理

• 当事件第一次触发时，设置一个定时器，延迟指定的时间后执行处理函数。
• 如果在延迟时间内事件再次被触发，则清除之前的定时器，重新设置一个新的定时器。
• 只有当事件在延迟时间内没有再次被触发时，处理函数才会执行。

2、应用场景

• 搜索框输入：用户在搜索框中输入时，不需要在每次按键时都发送请求，而是等待用户输入完成后（例如延迟300ms）再发送请求。
• 窗口调整：当用户调整窗口大小时，不需要在每次窗口尺寸变化时都重新计算布局，而是等待用户调整完成后才执行布局计算。
• 按钮点击：防止用户快速多次点击按钮，确保按钮的点击事件只在最后一次点击后执行。

示例代码如下：

function debounce(func, delay) {
    let timer = null;
    return function(...args) {
        if (timer) {
            clearTimeout(timer); // 清除之前的定时器
        }
        timer = setTimeout(() => {
            func.apply(this, args); // 延迟后执行函数
        }, delay);
    };
}

// 使用
const handleResize = debounce(() => {
    console.log('窗口大小已调整');
}, 300);

window.addEventListener('resize', handleResize);

---

二、节流（Throttle）

节流的思想是：在一定时间内只允许事件处理函数执行一次，无论事件触发了多少次。

1、原理

• 设置一个时间间隔（例如100ms）。
• 当事件第一次触发时，立即执行处理函数，并记录当前时间。
• 在后续事件触发时，检查当前时间与上次执行时间的间隔是否大于设定的时间间隔，如果是，则再次执行处理函数并更新时间记录。

2、应用场景

• 鼠标移动事件：当鼠标移动时，不需要在每次鼠标移动时都执行处理函数，而是每隔一定时间执行一次。
• 滚动事件：当用户滚动页面时，每隔一定时间执行一次滚动处理函数，避免频繁触发导致性能问题。
• 动画效果：控制动画的更新频率，避免过度渲染。
  代码如下（示例）：

function throttle(func, limit) {
    let lastTime = 0;
    return function(...args) {
        const now = new Date().getTime();
        if (now - lastTime >= limit) {
            func.apply(this, args);
            lastTime = now;
        }
    };
}

// 使用
const handleScroll = throttle(() => {
    console.log('页面滚动了');
}, 100);

window.addEventListener('scroll', handleScroll);

---

三、防抖与节流的区别

• 防抖：确保事件在最后一次触发后的延迟时间内只执行一次处理函数。适合那些需要在事件结束后才执行的场景（如搜索框输入、窗口调整完成）。可以有效地减少不必要的操作和网络请求，提高性能，但是也会因延迟操作，会导致有些用户感知上的延迟。
• 节流：在固定的时间间隔内只执行一次处理函数。适合那些需要在事件频繁触发时控制执行频率的场景（如鼠标移动、滚动事件）。可以保证响应频率的同时减少函数的执行次数，提高性能。

总结

• 如果需要在事件完全停止触发后才执行处理函数，使用防抖。
• 如果需要在事件频繁触发时控制执行频率，使用节流。
• 在实际开发中，可以根据具体需求选择合适的优化方式，甚至可以结合使用防抖和节流来达到更好的效果。