什么是 throttle 和 debounce？
在介绍 throttle-debounce 包之前，我们先了解一下 throttle 和 debounce 的概念。
throttle
throttle 意为节流，在前端开发中指的是某个事件触发的频率过高时，通过控制事件执行的频率来减少资源消耗和代码性能问题。比如在滚动页面时，会频繁触发 scroll 事件，如果每次触发都处理业务逻辑，就会导致界面卡顿等问题，这时可以用 throttle 来限制事件的触发频率。
debounce
debounce 意为防抖，在前端开发中指的是某个事件触发后，等待一段时间再执行业务逻辑，如果在等待期间又触发了同样的事件，则重新计时。比如在输入框中搜索关键字时，用户每输入一个字符都会触发 input 事件，如果每次都发送请求，会增加服务器负担和网络传输等问题，这时可以用 debounce 来优化。
throttle-debounce 包简介
throttle-debounce 是一个 npm 包，它集成了 throttle 和 debounce 功能，提供了多种方式来控制事件的触发频率和延迟执行。
安装和使用
安装 throttle-debounce 的命令如下：
npm install throttle-debounce
在代码中使用 throttle 和 debounce 方法的示例如下：
-- -------------------- ---- ------- ------ - --------- -------- - ---- ------------------- -- ---- --------- ------- ------ ----- --------- - -------------- -- -- - ------------------------ -- -- ---- --------- ----- ------ -- ----- --------- - -------------- -- -- - ------------------------ -- -- --------- --------------------------------- ---------- -------------------------------- ----------
上面的例子中，我们分别创建了一个 throttled 和一个 debounced 函数，并将它们绑定到了 scroll 和 input 事件上。当这些事件被触发时，对应的函数就会被调用。
throttle 和 debounce 参数详解
throttle 和 debounce 方法都接受两个参数，第一个是要处理的函数，第二个是配置选项对象。
throttle
throttle 方法的配置选项说明如下：
delay：延迟时间，单位为毫秒，默认值为 250。noTrailing：是否禁用最后一次触发之后再延迟执行一次，默认值为 false，即最后一次触发后仍然延迟执行一次。leading：是否在首次触发时立即执行一次，默认值为 true。
debounce
debounce 方法的配置选项说明如下：
delay：延迟时间，单位为毫秒，默认值为 250。atBegin：是否在首次触发时立即执行一次，默认值为 false，即等待延迟时间之后才执行第一次。maxWait：最大等待时间，单位为毫秒，默认值为 undefined，即没有最大等待时间限制。
总结
throttle-debounce 包提供了方便易用的 throttle 和 debounce 功能，可以有效地控制事件的触发频率和延迟执行。在实际项目中，可以根据需求选择不同的方式来使用这个包，从而提升代码性能和用户体验。
示例代码见上文。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43922