js中如何实现防抖函数-js教程-PHP中文网

js中如何实现防抖函数

星降

发布： 2025-08-24 13:00:02

原创

346人浏览过

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

js中如何实现防抖函数

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

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

登录后复制

的值，这在处理事件监听器、类方法等场景时非常重要，因为你可能需要确保函数在正确的上下文中执行。

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

输入框搜索建议: 当用户在输入框中输入内容时，如果每次输入都发起搜索请求，会给服务器带来很大的压力。使用防抖函数，可以在用户停止输入一段时间后，才发起搜索请求，减少请求次数。
窗口大小调整: 当窗口大小调整时，可能会触发一些重新布局的操作。使用防抖函数，可以在窗口大小调整结束后，才执行重新布局的操作，避免频繁的布局计算。
按钮点击: 防止用户快速连续点击按钮，导致重复提交数据。

易笔AI论文
专业AI论文生成，免费生成论文大纲，在线生成选题/综述/开题报告等论文模板

103

查看详情

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

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;
      });
    }
  };
}

登录后复制