2022-07-21  2022-07-22    545 字  2 分钟

为什么需要防抖和节流?它们是什么?有什么区别?适用场景是什么?

简介

防抖与节流,主要用来控制事件处理函数的调用频率 ❗

在进行窗口的缩放(resize)、滚动(scroll),输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器负担,导致用户体验糟糕。

试想,你的事件处理函数是异步的,每次调用都会进行大量的数据检索……

如何控制调用频率呢?防抖和节流就是做这个的。

防抖

什么是防抖(debounce)?当持续触发事件时,在设定时间段🕐内没有再触发事件,事件处理函数才会执行一次;若在设定的时间段🕜内,又一次触发事件,就重新开始延时。

如下图,持续触发 scroll 事件时,并不执行 handle 函数,当 1000 毫秒内没有触发 scroll 事件时,才会延时触发 scroll 事件。

picture 1

……

节流

什么是节流(throttle)?当持续触发事件时,保证一定时间段内只调用一次事件处理函数。如下图,持续触发 scroll 事件时,并不立即执行 handle 函数,每隔 1000 毫秒才会执行一次 handle 函数。

picture 2

……

区别

不能看出,防抖的控频原理在于持续触发事件时,在设定的时间段内不再触发事件,才会调用一次执行函数;而节流的控频原理在于持续触发事件时,每隔设定的时间段才会调用一次执行函数。

当然,实际操作中,我们会对二者做一些相应的优化处理,但是从本质上来说,它们就是如此。

参考链接