防抖和节流

本质

事件触发和执行函数两者的时间规则。避免多次触发导致的多次执行。一般防抖针对的是用户操作导致的多次触发，节流针对的是浏览器或服务端导致的多次触发。有些场景两者可以通用。

1.防抖

事件触发-未等待到达特定时长-事件触发-等待特定时长-执行函数

代码

const debounce = (func, wait = 1000) => {
  let timer = 0
  return function(...args) {
    if(timer) clearTimeout(timer)
    timer = setTimeout(() => func.apply(this, args), wait)
  }
}

使用场景

登录，输入完查询，文本编辑器无任何修改后一秒保存。

2.节流

事件触发-等待特定时长(等待过程中多次触发)-执行函数

代码

const throttle = (func, wait = 1000) => {
    let lastTime = 0
    return function(...args) {
        let now = +new Date()
        if(now - lastTime > wait) {
            lastTime = now
            func.apply(this, args)
        }
    }
}

使用场景

resize和scroll等多次触发的事件，视频播放进度条计算。