防抖与节流

简介

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

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

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

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

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

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

![[assets/Pasted image 20230525173428.png]]

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

![[assets/Pasted image 20230525173440.png]]

……

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

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