JavaScript 防抖 - Stellar Observer Protocol

903 字

5 分钟

JavaScript 防抖

2024-08-17

Code

前端

/

JavaScript

/

性能优化

/

手写代码

题目描述#

实现 JavaScript 防抖函数，要求：

延迟执行函数直到停止触发后的指定时间
支持立即执行选项（首次触发立即执行）
支持取消功能（在等待期间取消执行）
支持返回值处理（适用于 Promise 场景）
正确处理函数参数和 this 绑定

要求完整实现防抖逻辑，并通过测试用例验证。

解题思路#

计时器管理：使用 setTimeout 实现延迟执行
立即执行选项：首次触发立即执行函数
取消机制：提供取消执行的方法
参数传递：保存函数参数并正确传递
返回值处理：支持 Promise 返回值
this 绑定：确保函数执行上下文正确

关键洞察#

延迟执行本质：通过清除重置计时器实现延迟效果
立即执行分离：首次调用立即执行，后续调用防抖
参数保存机制：闭包保存参数确保最新值
Promise 支持：通过返回值封装 Promise
内存管理：及时清除计时器避免内存泄漏
上下文绑定：使用 apply 确保 this 正确

代码流程#

flowchart TD 
	A[调用防抖函数] --> B{立即执行?} 
	B -->|是| C[立即执行函数] 
	B -->|否| D[清除旧计时器] 
	D --> E[设置新计时器] 
	E -->|等待延迟| F[执行函数] 
	G[取消操作] --> H[清除计时器]

代码实现#

1
function debounce(func, wait = 300, options = {}) {
2
  let timerId = null;
3
  let lastArgs = null;
4
  let lastThis = null;
5
  let result = null;
6

7
  // 立即执行选项默认值
8
  const leading = !!options.leading;
9
  const trailing = 'trailing' in options ? !!options.trailing : true;
10

11
  // 主函数
12
  function debounced(...args) {
13
    const now = Date.now();
14
    lastArgs = args;
15
    lastThis = this;
16

17
    // 立即执行分支
18
    if (leading && !timerId) {
19
      result = invokeFunc(now);
20
    }
21

22
    // 清除旧计时器
23
    clearTimeout(timerId);
24

25
    // 设置新计时器
26
    timerId = setTimeout(() => {
27
      // 非立即执行模式调用
28
      if (trailing && lastArgs) {
29
        result = invokeFunc(Date.now());
30
      }
31

32
      // 清理状态
33
      timerId = null;
34
      lastArgs = null;
35
      lastThis = null;
36
    }, wait);
37

38
    return result;
39
  }
40

41
  // 执行目标函数
42
  function invokeFunc(time) {
43
    return func.apply(lastThis, lastArgs);
44
  }
45

46
  // 取消方法
47
  debounced.cancel = function() {
48
    clearTimeout(timerId);
49
    timerId = null;
50
    lastArgs = null;
51
    lastThis = null;
52
  };
53

54
  // 立即执行当前值
55
  debounced.flush = function() {
56
    clearTimeout(timerId);
57
    return invokeFunc(Date.now());
58
  };
59

60
  return debounced;
61
}

测试代码#

1
// 基础防抖
2
const basicDebounce = debounce(() => {
3
  console.log('Resize event handled');
4
}, 250);
5

6
window.addEventListener('resize', basicDebounce);
7

8
// 立即执行防抖
9
const searchDebounce = debounce((query) => {
10
  console.log(`Searching for: ${query}`);
11
}, 500, {leading: true});
12

13
searchInput.addEventListener('input', (e) => {
14
  searchDebounce(e.target.value);
15
});
16

17
// 取消示例
18
const cancelableDebounce = debounce(() => {
19
  console.log('This will not run if canceled');
20
}, 1000);
21

22
cancelableDebounce();
23
setTimeout(cancelableDebounce.cancel, 500); // 取消执行
24

25
// Promise支持
26
const promiseDebounce = debounce((value) => {
27
  return Promise.resolve(`Processed: ${value}`);
28
}, 300);
29

30
promiseDebounce('data').then(console.log); // 输出: Processed: data