防抖和节流

前端开发中，防抖和节流是两种常用的优化方法，它们主要应用于控制处理频繁触发的事件，如鼠标滚动、窗口缩放、键盘事件等。

区别

• 防抖（Debouncing）: 将多次高频事件合并为一次事件。如，用户输入完成后一段时间内，不再对此事件进行处理，如果再次输入，将重新计时。
• 节流（Throttling）: 对一段时间内连续事件的处理，只进行一次处理。如，一段时间内，频繁触发的事件仅处理一次，而不是频繁处理。

总的来说，防抖主要是为了减少单个函数的调用频率，适用于要求事件最终执行的场景；而节流是为了限制触发频率，适用于要求每隔一段时间执行一次的场景。

案例说明

下面以一个简单的例子，说明防抖和节流的作用。

假设有一个页面，当用户在输入框内输入文字时，要实时请求服务器，返回匹配的结果。如果不使用防抖或节流，当用户快速输入时，会导致大量的请求，影响服务器性能，而且用户还需要等待很长的时间才能看到结果。

使用防抖：当用户输入完成后，一段时间内不再对事件进行处理，等待用户停止输入后，再一次性请求服务器，返回结果。

使用节流：对一段时间内的连续事件，只进行一次请求，忽略其他请求，达到限制请求频率的目的。

代码演示

以下是实现防抖的代码：

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

以下是实现节流的代码：

function throttle(fn, delay) {
  let flag = true;
  return function () {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      flag = true;
    }, delay);
  };
}

可以通过以上代码，对事件进行防抖和节流，从而提高事件处理效率。