防抖节流，优雅处理高频事件

在前端开发中，我们经常会遇到一些高频事件触发场景，例如鼠标快速移动、键盘快速输入等。如果我们对这些事件进行直接处理，可能会造成性能浪费和不必要的操作。此时，防抖和节流技术就应运而生，它们可以帮助我们优雅地处理高频事件，避免不必要的操作。

防抖的原理是，在事件触发后，我们并不立即执行函数，而是创建一个定时器，延迟一段时间后才执行。如果在这段时间内事件再次触发，我们就重新计算定时器，直到事件停止触发后再执行函数。

防抖适用于以下场景：

• 输入框中输入信息，需要在用户停止输入后才进行处理。
• 滚动事件中，需要在用户停止滚动后才执行操作。

节流的原理是，在事件触发后，我们并不立即执行函数，而是设置一个执行频率，在执行频率内，事件只会被执行一次。当执行频率到期后，事件才会再次被执行。

节流适用于以下场景：

• 鼠标移动事件中，需要在用户移动一定距离后才执行操作。
• 点击事件中，需要限制点击的频率，防止用户误操作。

JavaScript原生实现

// 防抖函数
function debounce(fn, delay) {
  let timer;
  return function() {
    const context = this;
    const args = arguments;
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, delay);
  };
}

// 节流函数
function throttle(fn, delay) {
  let lastTime = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(context, args);
      lastTime = now;
    }
  };
}

Lodash实现

Lodash中提供了防抖和节流函数，使用起来非常方便：

// 防抖函数
const debouncedFn = _.debounce(fn, delay);

// 节流函数
const throttledFn = _.throttle(fn, delay);

防抖和节流是两种非常实用的技术，可以帮助我们优雅地处理高频事件，避免不必要的操作和资源浪费。在实际开发中，我们可以根据不同的场景选择合适的技术，让我们的代码更加高效和健壮。