首页

面试题:手写节流throttle,防抖debounce

kkcode
2023-08-22  阅读 162

考点:性能、体验优化

节流(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 豪秒内只会执行一次,然后进入下一个新周期

本文为作者原创文章,转载无需和我联系,但请注明转载链接。 【前端黑猫】