如何区分并实现JavaScript中的节流和防抖函数？

本文共计1624个文字，预计阅读时间需要7分钟。

目录+引言+一、概念+二、实现+三、区别+四、Lodash+4-1. throttle+4-2. debounce+五、使用场景+六、总结+引言+在前端开发中，经常与DOM和BOM打交道，例如窗口的resize、scroll，输入框内容校验等。

目录

• 引言
• 一、概念
• 二、实现
• 三、区别
• 四、Lodash
• 4-1.throttle
• 4-2.debounce
• 五、使用场景
• 六、总结

引言

在前端开发中，经常和DOM、BOM打交道，例如：窗口的resize、scroll，输入框内容校验，按钮点击等等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。

此时我们可以采用throttle（节流）和debounce（防抖）的方式来减少调用频率，提高性能的同时又不影响实际效果。

一、概念

• 函数节流( throttle )：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。
• 函数防抖( debounce )：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。