防抖（Debounce）和节流（Throttle）是两种常见的优化技巧，通常用于控制函数在短时间内频繁触发的场景，尤其是在处理用户输入、滚动、窗口大小调整等事件时。它们的主要目的是减少不必要的函数调用，从而提高性能和用户体验。
1. 防抖（Debounce）
防抖是指在事件触发后的一段时间内不再触发该事件，只有当事件停止触发一定时间后，才执行一次函数。每次事件触发时，如果在设定的时间间隔内再次触发，则会重新计时。
- 应用场景：
- 搜索框输入：用户输入停止后才发送请求，避免每次按键都触发请求。
- 窗口大小变化：在用户停止调整窗口大小后，重新布局。
防抖的实现（以 JavaScript 为例）
- 解释：
- 每次调用 返回的函数时，会先清除上一次的定时器，然后重新设置一个新的定时器。
- 当持续触发该事件时，之前的定时器会不断被清除，直到最后一次事件结束后，才会执行目标函数 。
使用示例
2. 节流（Throttle）
节流是指在连续触发事件时，保证一定时间间隔内只执行一次函数，即函数调用是固定频率的，而不会因为事件频繁触发而频繁执行。
- 应用场景：
- 页面滚动：限制滚动事件的回调频率，防止滚动时函数被频繁调用。
- 按钮点击：防止用户多次点击按钮，触发多次事件。
- 监听鼠标移动：在拖动或滚动页面时限制频繁的回调。
节流的实现
- 解释：
- 记录上一次执行函数的时间。
- 当函数触发时，检查当前时间 和 的差值，如果超过设定的 ，则执行函数并更新 。
- 在 时间内的其他触发事件会被忽略。
使用示例
3. 防抖 vs 节流
比较点
防抖（Debounce）
节流（Throttle）
定义 事件触发后等待一定时间，如果没有再次触发才执行函数。 一定时间间隔内只执行一次函数。
适用场景 用户停止输入后发送请求、调整窗口大小后执行操作等。 限制滚动、鼠标移动、按钮点击的频率。
函数执行频率 事件停止触发后的最后一次执行。 固定时间间隔内执行一次，不管事件触发多少次。
关键点 函数会延迟执行，连续触发时只执行一次。 函数会以固定的频率执行，忽略多次触发。
4. 结合防抖与节流
有时候我们需要结合防抖和节流的特点。例如，在输入框中，用户输入时我们可以节流，用户停止输入一段时间后再进行防抖处理。
实现方式可以将防抖和节流的逻辑结合使用，也可以根据场景需求自行优化。
5. 传递参数
日常开发中我们经常需要传递参数，给业务函数进行处理，下面继续上面的示例讲解一下，这个时候该如何传递参数。
使用示例
以上就是对防抖和节流的讲解，以及在项目中的使用，如果还有不明白的欢迎留言！
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/12200.html