深入浅出防抖函数 debounce

定义及解读：防抖函数 debounce 的核心理念是，当函数在短时间内被触发多次时，只会执行最后一次调用。假设我们设定一个等待时间，比如3秒，每当触发函数请求时，计时器就会被重新设置，直到新的等待时间内没有请求，此时执行函数。类比于做公交车，司机等待最后一个人上车后关门，若新进乘客，计时器清零重新计时，等待结束后关门。上车乘客代表频繁事件触发，计时器是触发依据，关门代表最终执行的函数。若仍不理解，建议参考可视化比较页面。其中 Regular 代表未经处理的情况，throttle 是节流效果，debounce 是防抖效果。

原理及实现：通过定时器实现 debounce。函数首次执行时设置定时器，后续执行时清除之前定时器并重新设置新的定时器，如果存在未清除的定时器，计时结束后触发函数。实现示例：定义 debounce 函数，传入所需函数、等待时间以及可选的是否立即执行参数。当触发事件回调时，返回的函数会清除定时器并根据传入参数决定是否立即执行函数。

实现 1：基本实现，功能完整。实现 2：加强版，支持首次触发立即执行。

实现原理：判断 immediate 是否为 true，首次执行时直接执行函数或清除定时器后执行。加强版 throttle 结合 debounce，允许在 wait 时间内重新生成定时器，但 wait 时间结束后必须响应。

总结：编程爱好者可关注微信公众号“筑梦编程”，一起交流编程知识。每天更新有趣有用的编程内容。

您可能感兴趣问答

Collapsible

热门标签

热点问答