两种不同类型的防抖

第一个版本

function throttle1(fn, del) {
  var timeout = null;
  var lastArgs = null;
  return function(...args) {
    if (!timeout) {
      fn(...args);
      timeout = setTimeout(() => {
        lastArgs && fn(...lastArgs);
        lastArgs = null;
        timeout = null;
      }, del)
    } 
    else lastArgs = args;
  }
}

第二个版本

function throttle2(fn, delay){
    let timer = null
    return function(...args){
        if(!timer) {
            fn.apply(this, args)
            timer = setTimeout(() => {
                timer = null
            }, delay)
        }
    }
}

区别

这两个版本的防抖函数区别主要是是否保留了节流期间的最后一次函数调用

• 第一个版本（带 lastArgs 的）会保存并执行最后一次调用
• 第二个版本会直接丢弃节流期间的调用

相应的,保留节流期间调用的版本是怎么处理的呢

• 第一个版本：使用 timeout 和 lastArgs 两个状态变量
• 第二个版本：只使用 timer 一个状态变量

通过闭包的方式, 对节流期间的调用进行保留, 并在节流时间结束后进行执行

使用场景

• 第一个版本适合需要确保不丢失最后一次操作的场景，如输入框搜索
• 第二个版本适合只需要控制执行频率的场景，如页面滚动监听