如何实现让面试官拍大腿的防抖节流函数？

2023-10-19 21:20:16

这些年来，在前端开发中，防抖和节流似乎总是受到开发人员的亲睐，但同时也是让他们头痛的两个函数，因为它们往往能给代码增添一些难以理解的特性。

不可否认，这两个函数是非常有用的，但是在很多场景下还是不免会让开发人员摸不着头脑，因为我们往往需要将它们和一些事件的回调结合起来使用，让回调在合适的时机执行。

不过，只要你掌握了这两个函数的基本原理以及适用的场景，相信你会很快将它们驾驭得炉火纯青。所以我今天将手把手地教你如何使用防抖和节流函数，让你能在面试中拍大腿。

我们先来谈谈防抖函数。防抖函数的主要作用是防止函数被频繁调用，通常在用户输入的时候使用。例如，我们有一个搜索框，当用户输入时，我们会触发一个函数去搜索相关的内容。如果我们不使用防抖函数，那么当用户输入很快时，函数就会被频繁调用，这不仅会浪费资源，还会影响用户体验。

而节流函数的主要作用是限制函数的调用频率。我们通常在用户连续点击按钮或滚动页面的时候使用。例如，我们有一个按钮，当用户点击时，我们会触发一个函数去做一些操作。如果我们不使用节流函数，那么当用户快速点击按钮时，函数就会被频繁调用，这也会浪费资源并影响用户体验。

了解了防抖和节流函数的基本原理和使用场景后，我们来看看如何实现一个让面试官拍大腿的防抖节流函数。

首先，我们需要定义一个防抖函数。我们可以使用如下代码：

function debounce(func, wait, immediate) {
  let timeout;
  return function () {
    let context = this;
    let args = arguments;
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      let callNow = !timeout;
      timeout = setTimeout(() => {
        timeout = null;
      }, wait);
      if (callNow) func.apply(context, args);
    } else {
      timeout = setTimeout(() => {
        func.apply(context, args);
      }, wait);
    }
  };
}

这个函数接受三个参数：func（要执行的函数）、wait（防抖延迟时间）和immediate（是否立即执行）。如果immediate为true，那么函数会在防抖延迟时间后立即执行一次，然后再按照防抖延迟时间执行。如果immediate为false，那么函数只会按照防抖延迟时间执行。

接下来，我们需要定义一个节流函数。我们可以使用如下代码：

function throttle(func, wait, options) {
  let timeout;
  let previous = 0;
  if (!options) options = {};
  const later = function () {
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    func.apply(this, arguments);
  };
  const throttled = function () {
    const now = Date.now();
    if (!previous && options.leading === false) previous = now;
    const remaining = wait - (now - previous);
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      func.apply(this, arguments);
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
  };
  throttled.cancel = function () {
    clearTimeout(timeout);
    timeout = null;
    previous = 0;
  };
  return throttled;
}