JavaScript 防抖和节流

懒人侃体坛

JavaScript 防抖和节流是两种常见的性能优化技术，用于减少函数的执行次数。
防抖（debounce）是指在一段时间内，如果有多次触发事件，则只执行最后一次事件。
节流（throttle）是指在一段时间内，只执行一次事件。
例如，你可以使用防抖和节流来优化滚动事件的处理，以避免在页面滚动过程中过于频繁地执行函数：

1. // 防抖函数
2. function debounce(fn, delay) {
3.   let timer
4.   return function() {
5.     const context = this
6.     const args = arguments
7.     clearTimeout(timer)
8.     timer = setTimeout(function() {
9.       fn.apply(context, args)
10.     }, delay)
11.   }
12. }
14. // 节流函数
15. function throttle(fn, delay) {
16.   let lastTime = 0
17.   return function() {
18.     const context = this
19.     const args = arguments
20.     const nowTime = new Date().getTime()
21.     if (nowTime - lastTime > delay) {
22.       fn.apply(context, args)
23.       lastTime = nowTime
24.     }
25.   }
26. }
28. // 使用防抖函数
29. const debouncedHandleScroll = debounce(handleScroll, 100)
30. window.addEventListener('scroll', debouncedHandleScroll)
32. // 使用节流函数
33. const throttledHandleScroll = throttle(handleScroll, 100)
34. window.addEventListener('scroll', throttledHandleScroll)

复制代码

在使用防抖和节流时，需要注意以下几点：

• 防抖和节流的时间间隔是可以调整的。你可以根据实际情况来调整时间间隔，以达到最优的性能。
  
• 防抖和节流的实现方式可能会有所不同。例如，有的防抖函数会在第一次触发事件后立即执行函数，而有的防抖函数会等待一段时间后再执行函数。同样，有的节流函数会在第一次触发事件后立即执行函数，而有的节流函数会等待一段时间后再执行函数。
  
• 防抖和节流的效果可能会受到事件触发频率的影响。如果事件触发频率过高，防抖和节流可能会失效。在这种情况下，你可能需要调整时间间隔或者采用其他的性能优化技术。
  
• 防抖和节流不能用于所有场景。例如，如果你需要在每次事件触发后立即执行函数，那么防抖和节流就不适用了。
  

需要注意的是，JavaScript 中的防抖和节流是通过设置定时器来实现的。这意味着，如果你的应用中使用了大量的防抖和节流函数，那么可能会导致内存泄漏。为了避免这种情况，你应该在不使用防抖和节流函数时清除定时器。
例如，你可以在使用防抖函数时，在清除定时器之前将定时器赋值为 null：

1. function debounce(fn, delay) {
2.   let timer = null
3.   return function() {
4.     const context = this
5.     const args = arguments
6.     clearTimeout(timer)
7.     timer = setTimeout(function() {
8.       fn.apply(context, args)
9.       timer = null
10.     }, delay)
11.   }
12. }

复制代码

同样，你也可以在使用节流函数时，在清除定时器之前将定时器赋值为 null：

1. function throttle(fn, delay) {
2.   let timer = null
3.   return function() {
4.     const context = this
5.     const args = arguments
6.     if (!timer) {
7.       timer = setTimeout(function() {
8.         fn.apply(context, args)
9.         timer = null
10.       }, delay)
11.     }
12.   }
13. }

复制代码

通过这些方法，你就可以在 JavaScript 中正确地使用防抖和节流来优化函数的执行，并避免内存泄漏的问题了。

来源:https://www.cnblogs.com/yuzhihui/p/17037703.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！