JavaScript中的防抖（Debounce）与节流（Throttle）是用来优化高频率事件处理的策略。防抖确保事件触发后一定延迟内不再触发，才执行函数，适用于如搜索框输入、窗口调整等，可减少不必要的计算或请求。节流则是指在固定时间间隔内，无论事件触发多少次，都只执行一次处理函数，保证执行频率，适用于滚动事件、动画控制等场景，维持操作流畅性。简言之，防抖减少连续触发，节流控制执行频率。
概念：
防抖技术是一种编程技巧，用于限制某个函数在一定时间内只能执行一次。它特别适用于处理那些可能会因为连续触发而产生大量重复执行的事件，例如窗口调整大小、输入框内容变化、按钮点击等。防抖的核心思想是：当事件被触发时，并不立即执行函数，而是等待一个特定的延迟时间，如果在这个延迟时间内事件又被触发了，则重新开始计时，直到延迟时间结束后才真正执行函数。
应用场景：
- 搜索框的实时搜索建议：防止用户输入过程中频繁发送请求。
- 窗口大小调整时的重绘操作：避免因窗口频繁调整而持续触发重排重绘，影响性能。
- 按钮防连击：确保按钮不会因为用户快速连续点击而多次触发同一动作。
示例代码：
下面是一个简单的防抖函数实现及其使用示例：
在这个示例中，函数接收两个参数：要防抖的函数和延迟时间。当用户在搜索框中输入时，函数会被调用，但只有在用户停止输入一段时间（这里是300毫秒）后，真正的搜索逻辑才会执行，从而避免了因连续输入导致的频繁搜索请求。
概念：
节流技术也是一种编程技巧，用于控制函数的执行频率，确保函数在给定的时间间隔内只执行一次。与防抖不同，节流保证了在固定时间间隔内至少执行一次函数，即使在这段时间内事件被频繁触发。节流常用于处理滚动事件、拖拽操作等，以避免因高频事件导致的性能问题。
应用场景：
- 滚动事件监听：当用户滚动页面时，只希望每隔一段时间处理一次滚动位置更新，而不是每次像素变化都处理。
- 自动保存功能：在编辑文档时，为了减少服务器负担，每隔一段时间自动保存一次，而不是每次按键都保存。
示例代码：
下面是一个基础的节流函数实现及其使用示例：
在这个示例中，函数确保函数在每1000毫秒内最多被执行一次，即便滚动事件在此期间被频繁触发。如果在限制时间内又有新的滚动事件，这些事件会被暂存，在上一次执行完成后立即执行（如果有积压的话），这样既保证了执行效率，又不会遗漏任何一次触发。
尽管手动实现防抖和节流函数并不复杂，但使用成熟的第三方库（如lodash的_.debounce和_.throttle）可以简化代码并减少潜在的错误。这些库通常经过广泛测试，支持更多高级选项和更好的性能优化。
常用第三方库包括：
- Lodash: Lodash提供了和函数，它们是实现防抖和节流功能的流行选择，使用简单且功能强大。
- RxJS: 在 ReactiveX 库中，尤其是用于JavaScript的RxJS，提供了操作符如和，这些操作符基于Observables，非常适合复杂异步和事件处理场景。
- Vue.js和React的实用库: 在Vue和React等前端框架中，也有专门的库或直接在框架的方法集中提供防抖和节流功能，例如Vue的库包含了防抖和节流的Hook。
- Underscore.js: 如果项目规模不大，且主要需要基本的实用功能，追求代码的简洁和轻量级，Underscore.js是一个很好的选择。Underscore.js 本身作为一个整体库提供，并不直接支持像Lodash那样官方提供的按需加载或模块化构建功能。
使用这些第三方库，开发者无需从头编写防抖和节流的逻辑，只需引入相应的方法，并根据需求配置参数即可高效地优化应用性能。
Lodash 是一个流行的JavaScript实用函数库，其中包含了强大的防抖和节流功能，能够帮助开发者轻松优化事件处理逻辑。
防抖（debounce）
创建并返回一个防抖过的函数，该函数在最后一次调用后的 毫秒后执行。如果在等待期间被再次调用，则重新计时。
示例：
节流（throttle）
创建并返回一个节流过的函数，该函数保证 毫秒内至少执行一次，如果在这段时间内又被调用，则不会执行。
示例：
RxJS 是一个用于处理异步数据流的库，适用于Reactive Programming。它提供了操作符来实现防抖和节流。
防抖(debounceTime)
在源Observable发出的每个项目之间等待指定的时间，然后仅发出最近的那个项目。
节流(throttleTime)
在规定的持续时间内，只让第一个值通过，忽略后续值，直到下一个周期开始。
示例（RxJS）:
Vue的库提供了一系列实用的Composition API Hooks，其中包括用于防抖（debounce）和节流（throttle）的Hook，可以帮助开发者更方便地处理高频触发的事件，如用户输入、滚动等，从而优化性能和用户体验。
防抖（debounce）
Hook 可以将任何函数转换为防抖函数。这意味着在用户停止操作一段时间后，该函数才会执行，有助于减少不必要的计算或网络请求。
示例:
在模板中使用这个防抖函数:
节流（throttle）
Hook 则用于创建一个节流函数，确保函数在指定的时间间隔内最多执行一次，适用于需要控制执行频率的场景。
示例:
注意事项
- 使用这些Hooks时，确保导入正确的库并按照Vue 3的Composition API规则组织代码。
- 当组件卸载时，如果在setup函数中绑定了事件监听器，记得使用生命周期钩子来清理，以避免内存泄漏。
- 可以根据具体需求调整防抖和节流的延迟时间，以达到最佳的性能和用户体验平衡。
Underscore.js是一个JavaScript实用库，提供了许多有用的函数来处理数组、集合、对象以及函数等功能。在处理事件或函数频繁触发的场景时，Underscore提供了和两个函数，分别用来实现防抖和节流。
防抖（debounce） 示例
节流（throttle） 示例
参数说明
对于Underscore中的这两个函数，除了函数本身和延迟时间外，还可以提供一个可选的对象来进一步定制行为，比如：
- : 设置为时，会在延迟开始前立即调用函数；默认为，意味着在延迟结束后调用。
- : 设置为时，如果在延迟结束前又有新的调用，则不执行最后一次调用；默认为，意味着总会执行最后一次调用。
通过使用Underscore的防抖和节流函数，开发者可以轻松地提高应用的响应性和性能。
以上示例展示了如何使用第三方库来实现防抖和节流功能，根据项目需求和现有的技术栈选择合适的方法。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/13780.html