防抖和节流的原理和封装

214 阅读1分钟

防抖- debounce

防止抖动 防止事件在短时间内频繁被触发,用户停止输入后,延迟超过500ms时,才去搜索此时的String,这就是防抖。

*原理:将若干个函数调用合成为一次,并在给定时间过去之后仅被调用一次。

封装

image.png

image.png

调用

image.png

节流- throttle

我们不想用户一味的输入,而是给用户一些搜索提示,在一定的时间内只触发一次 ,所以在当中限制每过500ms就查询一次此时的String,这就是节流。

原理:节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。

封装

image.png

image.png