深入浅出精通面试必考：手写防抖与节流原理与应用，10分钟掌握！

前端

2023-11-24 07:39:46

前言

防抖和节流是两个非常重要的 JavaScript 性能优化手段。它们可以帮助我们提高 Web 应用程序的性能，并降低内存消耗。在面试中，防抖和节流也是必考题。

原理

防抖

防抖的原理是，当一个函数被多次触发时，它只会在最后一次触发后执行一次。这可以防止函数被多次调用，从而提高性能。

节流

节流的原理是，当一个函数被多次触发时，它只会在一定时间间隔内执行一次。这可以防止函数被频繁调用，从而降低内存消耗。

实现

立即执行版本

// 防抖
function debounce(fn, wait) {
  let timer = null;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, wait);
  };
}

// 节流
function throttle(fn, wait) {
  let canRun = true;
  return function () {
    if (!canRun) {
      return;
    }
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, wait);
  };
}

非立即执行版本

// 防抖
function debounce(fn, wait) {
  let timer = null;
  return function () {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, wait);
    }
  };
}

// 节流
function throttle(fn, wait) {
  let canRun = false;
  return function () {
    if (!canRun) {
      return;
    }
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, wait);
  };
}