防抖与节流:目的都是减少请求的次数
一.函数防抖:
1.函数防抖 : 单位时间内,频繁触发一个事件, 以'最后一次'触发为准
2.防抖应用场景: 输入框输入事件
3.防抖流程 :
3.1 声明一个全局变量存储定时器ID
3.2 每一次触发交互的时候,先清除上一次定时器。 然后把本次事件处理代 码放入定时器中
开启定时器执行代码:
二.函数节流:
1.函数节流 : 单位时间内,频繁触发一个事件, 只会触发一次
2.节流场景 : 解决高频事件 (滚动条事件高频触发)
3.节流实现:
3.1 声明一个全局变量存储触发时间 let lastTime = null
3.2 每一次触发事件,获取当前时间 let currentTime = Date.now()
3.3 判断 当前时间 与 上一次触发时间,是否超过间隔 currentTime-lastTime>=500
3.4 如果超过触发间隔,则执行事件处理代码。 然后存储本次触发事件 lastTime = currentTime
开启定时器执行代码: