js防抖和节流剖析.pdf

JavaScript中的防抖(debounce)和节流(throttle)是两种非常重要的性能优化技术，它们主要用于处理频繁触发的事件，以避免不必要的计算或网络请求，从而提高应用的性能和用户体验。 防抖技术的主要应用场景包括但不限于： 1. **登录验证**：在用户连续快速点击登录按钮时，防抖可以确保在用户停止输入一段时间后才执行实际的登录请求，防止发送多个请求。 2. **窗口调整**：当用户快速调整浏览器窗口大小时，resize事件可能会触发很多次。防抖可以确保在用户停止调整后，只执行最后一次调整后的计算。 3. **文本编辑器实时保存**：在用户持续编辑文档时，防抖可以确保只有在用户停止编辑一段时间后（例如1秒）才保存文档，防止频繁的保存操作。 防抖函数的实现原理是利用`setTimeout`来延后函数的执行，并在每次事件触发时清除之前的定时器，这样只有最后一次触发的事件才会执行。例如： ```javascript function debounce(f, wait) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { f(...args); }, wait); }; } ``` 节流技术则是在设定的时间间隔内，无论事件触发多少次，都只执行一次函数。这类似于限制流量，确保在一定时间内不会超过预设的阈值。节流常用于： 1. **滚动事件**：当用户滚动页面时，每隔一定时间（如1秒）计算一次当前的位置信息，而不是每次滚动都计算。 2. **播放进度更新**：在视频播放时，每隔一定时间（如1秒）更新一次进度信息。 3. **实时搜索**：在输入框中实时搜索时，不是每次输入字符都发送请求，而是每隔一定时间（如1秒）发送一次请求。 节流函数的实现通常会用到一个标志变量`timer`来记录定时器的状态，确保在设定的时间间隔内只执行一次函数。例如： ```javascript function throttle(f, wait) { let timer; return (...args) => { if (timer) { return; } timer = setTimeout(() => { f(...args); timer = null; }, wait); }; } ``` 在这个实现中，如果定时器已存在（即上一次的执行还未完成），则返回而不执行函数，等待下一次事件触发。在设定的等待时间结束后，执行函数，并将标志重置为`null`，准备接受下一轮的事件。 防抖和节流都是为了优化性能，减少不必要的计算和网络请求。防抖关注的是在一段时间内避免重复执行，而节流关注的是控制执行的频率。根据不同的场景，选择合适的策略可以显著提升应用的效率。