什么是防抖节流

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

防抖（Debounce）是指在短时间内连续触发同一个事件，只执行一次回调函数。例如，在输入框中实时搜索功能中，当用户连续输入几个字符时，通过防抖可以减少不必要的请求，只在用户停止输入一段时间后再发出请求。

节流（Throttle）是指在一定时间内只能执行一次回调函数。例如，在页面滚动事件中，可以通过节流来限制回调函数的执行频率，避免过于频繁的事件触发导致性能问题。

综合来说，防抖和节流都是为了控制回调函数执行的频率，从而提高性能和用户体验。
函数防抖的实现通常使用定时器来延迟函数的执行，只有在一定时间内没有再次触发该事件时才会执行。以下是一个简单的函数防抖实例：

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

这里的 debounce 函数接受两个参数，func 是需要进行防抖处理的函数，delay 是防抖的时间间隔。返回的函数是一个闭包，用于实现防抖功能。在闭包中，使用 clearTimeout 方法清除上一次的定时器，然后重新设置一个新的定时器，等待 delay 毫秒后再执行回调函数。在执行回调函数时，使用 apply 方法传入原来的上下文和参数。

使用这个函数，可以对需要进行防抖的函数进行包装，例如：

function search() {
  // 实现搜索逻辑
}

const debounceSearch = debounce(search, 300);

document.querySelector('input').addEventListener('input', debounceSearch);

在这个例子中，我们使用 debounce 函数对 search 函数进行防抖处理，并将处理后的函数 debounceSearch 作为事件监听器绑定到输入框的 input 事件上。这样，在用户输入时，只有当用户输入完成后停顿了 300 毫秒，才会执行搜索函数，避免了频繁的搜索请求。