节流

image.png

作用:

onscroll,onkeyup,onkeydown,resize,onkeypress等主要解决高频事件。

原理:

单纯的降低频率,保证一段时间内,只执行一次就达到节省资源的目的。

例:onkeyup每键入一个字母就会触发一次,如果触发后要请求数据,那就要执行很多次请求了

未设置节流前

image.png

使用节流后

image.png

防抖

作用:

onscroll,oninput等时时触发的问题

实现原理:

通过setTimeout设置时间,在触发事件后,在一定时间内没有再次触发事件,处理函数才会执行,如果在设定的时间内又触发了事件,那就重新计时。

通俗解释:

张三在电梯里,电梯每5秒关闭电梯门,当电梯过了3秒时,将要关闭电梯门时,李四进来了,这时候电梯又重新计时,经过5秒后关闭电梯门,如果又过了3秒时,王五进来了,电梯又会重新计时,再经过5秒且这5秒内没有人再进入,电梯就开始正常升降了。

image.png