防抖与节流!

215 阅读1分钟

防抖与节流:目的都是减少请求的次数

一.函数防抖:

1.函数防抖 : 单位时间内,频繁触发一个事件, 以'最后一次'触发为准

2.防抖应用场景: 输入框输入事件

3.防抖流程 :

3.1 声明一个全局变量存储定时器ID
3.2 每一次触发交互的时候,先清除上一次定时器。 然后把本次事件处理代 码放入定时器中

开启定时器执行代码:

image.png

image.png image.png

二.函数节流:

1.函数节流 : 单位时间内,频繁触发一个事件, 只会触发一次

2.节流场景 : 解决高频事件 (滚动条事件高频触发)

3.节流实现:

3.1 声明一个全局变量存储触发时间 let lastTime = null

3.2 每一次触发事件,获取当前时间 let currentTime = Date.now()

3.3 判断 当前时间 与 上一次触发时间,是否超过间隔 currentTime-lastTime>=500

3.4 如果超过触发间隔,则执行事件处理代码。 然后存储本次触发事件 lastTime = currentTime

开启定时器执行代码:

image.png

image.png image.png