防抖函数是一种常用的优化方法,可以避免在短时间内频繁触发某个函数而导致性能问题。

作用是在一定时间内,如果重复触发同一个函数,只执行最后一次,以减少函数执行次数,节省性能。

这个防抖函数接受两个参数,第一个参数是要执行的函数,第二个参数是延迟时间。函数内部创建了一个计时器,每次函数被调用时,先清除之前的计时器,并重新设置一个新的计时器,在延迟时间后执行函数。如果在延迟时间内再次调用函数,会清除之前的计时器,并重新设置一个新的计时器,直到延迟时间内没有新的调用,才会执行函数。

完备版实现:

下面是一个使用JavaScript实现的功能完备的防抖函数:

如果 设置为 ,则函数会在第一次触发时立即执行,不会等待 时间。如果设置为 或不传入该参数,则函数会在最后一次触发后等待 时间再执行。

在函数内部,使用闭包保存了 、、、 和 这些变量。在每次函数被触发时,都会更新这些变量的值,并根据 和 的状态来决定是否调用 。如果 存在,则表示函数已经被触发过了,需要等待 时间再执行;如果不存在,则表示函数尚未被触发,需要创建一个新的 并设置等待时间;如果 为 ,还需要在第一次触发时立即执行。

使用这个防抖函数非常简单,只需要把要防抖的函数和等待时间传入即可。例如:

这样就创建了一个防抖的函数 ,它会在 被触发后等待 500 毫秒再执行。如果需要立即执行,可以设置 :

这样 就会在第一次触发时立即执行,然后在接下来的 500 毫秒内不会再次执行,直到最后一次触发后再执行一次。