函数防抖和函数节流：前端开发中的神器

2023-11-23 02:51:29

什么是函数防抖？

函数防抖（debounce）是一种技术，它可以限制函数的执行频率，以防止函数在短时间内被重复调用。这对于一些事件监听器（如滚动事件、键盘事件、鼠标事件、按钮点击等）非常有用，可以防止这些事件监听器在短时间内被重复触发，从而导致性能问题和用户体验不佳。

函数防抖的原理是：当事件监听器被触发时，它会先启动一个定时器。如果在定时器到期之前，事件监听器又被触发，那么定时器会被重置。这样，函数就不会被执行。只有当定时器到期后，函数才会被执行。

函数防抖的实现

在JavaScript中，我们可以使用以下代码来实现函数防抖：

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

这个函数接收三个参数：

func：要防抖的函数。
wait：防抖的时间间隔，单位是毫秒。
immediate：如果为 true，则函数会在第一次调用时立即执行，然后按照 wait 的时间间隔进行防抖。如果为 false，则函数会在最后一次调用 wait 时间间隔后执行。

函数节流的实现

function throttle(func, wait, options) {
  let timeout;
  let previous = 0;
  if (!options) options = {};

  const later = function () {
    previous = options.leading === false ? 0 : new Date().getTime();
    timeout = null;
    func.apply(this, arguments);
  };

  const throttled = function () {
    const now = new Date().getTime();
    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;
}

这个函数接收四个参数：

func：要节流的函数。
wait：节流的时间间隔，单位是毫秒。
options：一个可选的对象，可以指定以下选项：
- leading：如果为 true，则函数会在第一次调用时立即执行，然后按照 wait 的时间间隔进行节流。如果为 false，则函数会在最后一次调用 wait 时间间隔后执行。
- trailing：如果为 true，则函数会在最后一次调用 wait 时间间隔后执行。如果为 false，则函数不会在最后一次调用 wait 时间间隔后执行。