面试题：手写节流throttle，防抖debounce

考点：性能、体验优化

节流（throttle）

含义：预先设定一个执行周期，当调用动作的时刻大于等于 n 则执行该动作，n 豪秒内只会执行一次，然后进入下一个新周期

使用场景：

• 节流常应用于鼠标不断点击触发、监听滚动事件。

const throttle = (fn,time)=>{
    let flag=true;
    return function(){
        if(!flag) return;
        flag=false;
        setTimeout(()=>{
            fn.apply(this,arguments)
            flag=true
        },time)
    }
}

// 使用
window.onscroll = throttle(function(){
    console.log('正在加载中~')        
},3000)
复制代码

防抖 （debounce）

含义 ：当调用动作过 n 豪秒后，才会执行该动作，若在这 n 毫秒内，又调用此动作，则将重新计算执行时间

使用场景：

• 输入框打字搜索查询时，节约请求资源
• window 对象的 resize 事件
• 拖拽时的 mousemove 事件

const debounce = (func, wait = 50) => { // func是用户传入需要防抖的函数  wait是等待时间
  let timer = 0  
  return function(...args) {//每次用户实际调用的防抖函数
    if (timer) clearTimeout(timer)   // 如果已经设定过定时器了就清空上一次的定时器
    timer = setTimeout(() => {    // 开始一个新的定时器，延迟执行用户传入的方法
      func.apply(this, args)
    }, wait)
  }
}复制代码

总结

1. 共同点

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

2. 区别

• 防抖 debounce 像是搜索框的查询，等待用户完成操作再执行，避免打字期间就不断的查询。当调用动作过 n 豪秒后，才会执行该动作，若在这 n 毫秒内，又调用此动作，则将重新计算执行时间。

• 节流 throttle 像是按钮的冷却时间，防止用户疯狂点击按钮提交表单不断的调用接口，我们限制 2 秒才发一次请求，不管你点击多少次；预先设定一个执行周期，当调用动作的时刻大于等于 n 则执行该动作，n 豪秒内只会执行一次，然后进入下一个新周期