什么是防抖和节流

防抖和节流是两种常用的前端性能优化方法。

1. 防抖 (Debounce) 防抖是指在事件被连续触发时，只在特定的时间延迟后执行一次操作。也就是说，当一个事件被连续触发时，只有在最后一次触发后的一定时间内没有新的触发时，才执行相应的操作。这个延迟时间可以根据实际需求来设置。

防抖常用于处理频繁触发的事件，例如窗口大小调整、滚动事件、输入框实时搜索等场景。通过使用防抖技巧，可以减少事件处理函数的执行次数，从而提高性能和避免不必要的操作。

下面是一个简单实现防抖的例子：

function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

// 使用防抖函数处理事件
const debouncedEventHandler = debounce(() => {
  // 需要执行的操作
}, 200);

2. 节流 (Throttle) 节流是指在事件被连续触发时，以一定的固定速率执行操作。也就是说，在一定的时间间隔内，只执行一次相应的操作。与防抖不同的是，节流总是在固定时间间隔内执行操作，而不会考虑最后一次触发的时间。

节流常用于限制某些高频率的事件，例如鼠标移动、窗口滚动等。通过使用节流技巧，可以控制事件处理函数的执行频率，减少过多的计算、渲染或请求，提高页面的响应速度和用户体验。

下面是一个简单实现节流的例子：

function throttle(func, delay) {
  let timer;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

// 使用节流函数处理事件
const throttledEventHandler = throttle(() => {
  // 需要执行的操作
}, 200);

防抖和节流都是用来优化高频率触发的事件的常用方法。防抖是在连续触发事件时，只在一定时间延迟后执行一次操作，而节流则是以固定的时间间隔执行一次操作。在实际开发中，根据需求和情况，选择合适的方法可以提升页面性能和用户体验。