JS防抖函数原理与实现方法解析

想要提升JavaScript性能，避免频繁触发函数？本文深入解析JS防抖函数的实现方法与应用场景。防抖的核心在于延迟执行函数，并在延迟时间内重新计时，确保事件停止触发后才执行，有效应用于搜索建议、窗口调整等场景。文章详细讲解了`func.apply(context, args)`的用法，以及为何使用apply而非直接调用，强调了对`this`上下文的精确控制。此外，还介绍了立即执行的防抖函数，并通过`immediate`参数实现首次触发立即执行。最后，对比了防抖与节流的区别，明确了防抖适用于“最后一次有效”，节流适用于“周期内只执行一次”的场景，并提供了选择依据，助你根据实际需求选择合适的函数。

防抖函数的核心是延迟执行函数并在延迟内重新计时，确保事件停止触发后才执行，适用于搜索建议、窗口调整等场景；1. func.apply(context, args)用于绑定this上下文和传递参数，确保函数在正确上下文中执行；2. 使用apply而非func(...args)是为了精确控制this值，尤其在事件处理中保持上下文一致；3. 立即执行的防抖通过immediate参数和callNow判断实现首次触发立即执行；4. 防抖与节流的区别在于防抖是“最后一次有效”，节流是“周期内只执行一次”；5. 节流可通过时间戳或requestAnimationFrame实现，后者更契合浏览器渲染节奏，提升性能；6. 选择依据：防抖用于停止后执行，节流用于持续中定期执行，根据场景需求决定。

防抖函数的核心在于，延迟执行一个函数，如果在延迟时间内再次触发，则重新计时。这样可以避免函数被频繁调用，提高性能。

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

防抖的核心在于，当事件被触发时，不是立即执行事件处理函数，而是给出一个延迟时间。如果在延迟时间内，事件再次被触发，就重新计算延迟时间。只有在延迟时间结束后，才会执行事件处理函数。

如何理解 func.apply(context, args)？

func.apply(context, args) 允许你显式地设置函数执行时的 this 值（即 context）以及传递给函数的参数（通过 args 数组）。

• context: 指定 func 函数执行时的 this 值。 如果 context 是 null 或 undefined，非严格模式下 this 会指向全局对象（例如浏览器中的 window），严格模式下 this 会是 undefined。 在上面的 debounce 函数中，context 被设置为 this，这样可以确保在防抖后的函数执行时，this 指向的是触发事件的元素或者组件。

  

• args: 一个数组或者类数组对象，包含了要传递给 func 函数的参数。 在 debounce 函数中，args 使用了剩余参数语法 (...args) 来收集所有传递给防抖函数的参数，然后将它们作为一个数组传递给 func。

示例:

function myFunction(arg1, arg2) {
  console.log("arg1:", arg1, "arg2:", arg2);
  console.log("this:", this);
}

const myObject = {
  name: "My Object"
};

// 使用 apply 调用 myFunction，并设置 this 为 myObject，传递两个参数
myFunction.apply(myObject, [10, 20]);

// 输出:
// arg1: 10 arg2: 20
// this: {name: 'My Object'}

为什么要使用 apply 而不是直接调用 func(...args)？

虽然 func(...args) 看起来更简洁，但在某些情况下，apply 提供了更强的灵活性。 主要区别在于对 this 值的控制。 apply 允许你明确地设置 this 的值，这在处理事件监听器、类方法等场景时非常重要，因为你可能需要确保函数在正确的上下文中执行。

防抖函数有哪些应用场景？

1. 输入框搜索建议: 当用户在输入框中输入内容时，如果每次输入都发起搜索请求，会给服务器带来很大的压力。使用防抖函数，可以在用户停止输入一段时间后，才发起搜索请求，减少请求次数。

2. 窗口大小调整: 当窗口大小调整时，可能会触发一些重新布局的操作。使用防抖函数，可以在窗口大小调整结束后，才执行重新布局的操作，避免频繁的布局计算。

3. 按钮点击: 防止用户快速连续点击按钮，导致重复提交数据。

如何实现立即执行的防抖函数？

function debounce(func, delay, immediate) {
  let timeoutId;
  return function(...args) {
    const context = this;
    const callNow = immediate && !timeoutId;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      timeoutId = null; // 清除 timeoutId
      if (!immediate) {
        func.apply(context, args);
      }
    }, delay);
    if (callNow) {
      func.apply(context, args);
    }
  };
}

这段代码的关键在于 immediate 参数。如果 immediate 为 true，则在第一次触发时立即执行函数。callNow 变量用于判断是否应该立即执行。timeoutId = null 在定时器结束后被赋值，是为了确保下次调用时 callNow 能正确判断。

防抖函数和节流函数有什么区别？

防抖函数是在一段时间内，只执行一次函数。如果在该时间内再次触发，则重新计时。而节流函数是在一段时间内，最多执行一次函数。无论在该时间内触发多少次，都只执行一次。

简单来说，防抖是“最后一次算数”，节流是“一段时间内只算一次”。

手写一个节流函数：

function throttle(func, delay) {
  let lastTime = 0;
  return function(...args) {
    const context = this;
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(context, args);
      lastTime = now;
    }
  };
}

这个节流函数通过记录上一次执行的时间 lastTime，并在每次调用时检查当前时间与 lastTime 的差值是否大于等于 delay。如果是，则执行函数并更新 lastTime。这样就保证了在 delay 时间内，函数最多执行一次。

使用 requestAnimationFrame 实现节流有什么好处？

使用 requestAnimationFrame 的节流函数，可以更好地适应浏览器的渲染机制，避免不必要的重绘和回流，从而提高性能。

function throttle(func) {
  let waiting = false;
  return function(...args) {
    const context = this;
    if (!waiting) {
      waiting = true;
      requestAnimationFrame(() => {
        func.apply(context, args);
        waiting = false;
      });
    }
  };
}

requestAnimationFrame 会在浏览器下一次重绘之前执行传入的回调函数。这意味着，只有在浏览器准备好更新屏幕时，才会执行节流函数。这可以避免在短时间内多次执行函数，从而减少 CPU 和 GPU 的消耗。

如何选择防抖函数和节流函数？

• 防抖: 适用于只需要在事件停止触发后执行一次的场景，例如输入框搜索建议、窗口大小调整等。
• 节流: 适用于需要在一段时间内定期执行的场景，例如滚动事件、鼠标移动事件等。

选择哪个函数取决于具体的应用场景和需求。如果需要确保在事件停止触发后执行一次，则选择防抖函数。如果需要在一段时间内定期执行，则选择节流函数。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~