JavaScript 节流 - Stellar Observer Protocol

1098 字

5 分钟

JavaScript 节流

2024-04-17

Code

前端

/

性能优化

/

JavaScript

/

手写代码

题目描述#

实现 JavaScript 节流函数，要求：

固定时间间隔内只执行一次函数
支持立即执行选项（首次触发立即执行）
支持尾部执行选项（最后一次触发后执行）
支持取消功能（在等待期间取消执行）
正确处理函数参数和 this 绑定

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

解题思路#

时间戳控制：记录上次执行时间判断是否满足间隔
计时器管理：使用 setTimeout 实现尾部执行
立即执行选项：首次触发立即执行函数
尾部执行选项：最后一次触发后执行函数
取消机制：提供取消执行的方法
参数传递：保存函数参数并正确传递

关键洞察#

频率控制本质：通过时间间隔限制函数执行次数
双模式互补：时间戳模式保证立即响应，计时器模式保证最终执行
执行时机分离：头部执行保证即时性，尾部执行保证完整性
状态管理机制：闭包保存执行状态和时间戳
参数保存机制：闭包保存参数确保最新值
上下文绑定：使用 apply 确保 this 正确

代码流程#

flowchart TD 
	A[调用节流函数] --> B{是否首次执行?} 
	B -->|是且立即执行| C[立即执行函数] 
	B -->|否| D{是否在间隔内} 
	D -->|是| E[设置尾部执行] 
	D -->|否| F[立即执行] 
	G[取消操作] --> H[清除计时器]

代码实现#

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支持function throttle(func, wait = 300, options = {}) {
26
  let timerId = null;
27
  let lastArgs = null;
28
  let lastThis = null;
29
  let lastTime = 0;
30

31
  // 选项默认值处理
32
  const leading = 'leading' in options ? !!options.leading : true;
33
  const trailing = 'trailing' in options ? !!options.trailing : true;
34

35
  // 执行目标函数
36
  function invokeFunc(time) {
37
    lastTime = time;
38
    return func.apply(lastThis, lastArgs);
39
  }
40

41
  // 主函数
42
  function throttled(...args) {
43
    const now = Date.now();
44
    lastArgs = args;
45
    lastThis = this;
46

47
    // 计算剩余等待时间
48
    const remaining = wait - (now - lastTime);
49

50
    // 首次执行判断
51
    if (remaining <= 0 || remaining > wait) {
52
      // 清除尾部计时器
53
      if (timerId) {
54
        clearTimeout(timerId);
55
        timerId = null;
56
      }
57

58
      // 满足间隔要求，立即执行
59
      return invokeFunc(now);
60
    }
61

62
    // 设置尾部执行
63
    if (trailing && !timerId) {
64
      timerId = setTimeout(() => {
65
        timerId = null;
66
        if (trailing && lastArgs) {
67
          return invokeFunc(Date.now());
68
        }
69
      }, remaining);
70
    }
71
  }
72

73
  // 取消方法
74
  throttled.cancel = function() {
75
    clearTimeout(timerId);
76
    timerId = null;
77
    lastArgs = null;
78
    lastThis = null;
79
    lastTime = 0;
80
  };
81

82
  // 立即执行当前值
83
  throttled.flush = function() {
84
    if (timerId) {
85
      clearTimeout(timerId);
86
      timerId = null;
87
      return invokeFunc(Date.now());
88
    }
89
  };
90

91
  return throttled;
92
}
93
const promiseDebounce = debounce((value) => {
94
  return Promise.resolve(`Processed: ${value}`);
95
}, 300);
96

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

使用示例#

1
// 基础节流
2
const basicThrottle = throttle(() => {
3
  console.log('Scroll event handled');
4
}, 250);
5

6
window.addEventListener('scroll', basicThrottle);
7

8
// 立即执行节流
9
const leadingThrottle = throttle(() => {
10
  console.log('Immediate execution');
11
}, 500, {leading: true});
12

13
button.addEventListener('click', leadingThrottle);
14

15
// 尾部执行节流
16
const trailingThrottle = throttle(() => {
17
  console.log('Trailing execution');
18
}, 500, {trailing: true});
19

20
input.addEventListener('input', trailingThrottle);
21

22
// 取消示例
23
const cancelableThrottle = throttle(() => {
24
  console.log('This will not run if canceled');
25
}, 1000);
26

27
cancelableThrottle();
28
setTimeout(cancelableThrottle.cancel, 500); // 取消执行