js的防抖和节流实现

当需要限制某个函数被频繁调用时，节流（throttling）和防抖（debouncing）是两种常用的技术。

节流：限制函数在一定时间间隔内只执行一次。即使在该时间间隔内多次触发函数，也只会执行一次。
防抖：延迟函数的执行，在一定时间内只执行一次。如果在该时间内再次触发函数，则重新开始计时。

下面是使用 JavaScript 实现节流和防抖的示例代码：

1
// 节流函数
2
function throttle(func, delay) {
3
  let timeoutId
4
  let lastExecTime = 0
5

6
  return function (...args) {
7
    const currentTime = Date.now()
8
    if (currentTime - lastExecTime >= delay) {
9
      func.apply(this, args)
10
      lastExecTime = currentTime
11
    }
12
  }
13
}
14

15
// 防抖函数
16
function debounce(func, delay) {
17
  let timeoutId
18

19
  return function (...args) {
20
    clearTimeout(timeoutId)
21
    timeoutId = setTimeout(() => {
22
      func.apply(this, args)
23
    }, delay)
24
  }
25
}
26

27
// 测试节流函数
28
const throttleFn = throttle(() => {
29
  console.log('Throttled function executed')
30
}, 1000)
31

32
// 测试防抖函数
33
const debounceFn = debounce(() => {
34
  console.log('Debounced function executed')
35
}, 1000)
36

37
// 模拟触发函数
38
setInterval(() => {
39
  throttleFn()
40
  debounceFn()
41
}, 300)

在上面的代码中，throttle 函数会确保被限制的函数在一定时间间隔内只执行一次，而 debounce 函数会在一定时间内延迟函数的执行，如果在延迟时间内再次触发函数，则重新计时。

Lovely March7th!

js的防抖和节流实现

赞助支持

目录