手写节流 throttle、防抖 debounce

最新推荐文章于 2025-04-08 14:38:28 发布

原创最新推荐文章于 2025-04-08 14:38:28 发布 · 225 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #typescript

收录于

本文探讨了JavaScript中两种重要的优化技术——节流和防抖。介绍了它们的使用场景，并提供了手写实现的详细说明。

节流

// 节流就是「技能冷却中」 
const throttle = (fn, time) => {
  let cd = false
  return (...args) => {
    if ( cd ) return
    fn.call(undefined, ...args)
    cd = true
    seTimeout(()=>{
      cd = false
    }, time)
  }
}
// 还有一个版本是在冷却结束时调用 fn
// 简洁版，删掉冷却中变量，直接使用 timer 代替
const throttle = (f, time) => {
  let timer = mull
  return (...args)=>{
    if(timer) {return} 
    f.call(undefined, ...args) 
    timer = setTimeout(()=>{ 
      timer = null 
    }, time)
  }
}

使用方法

const f = throttle(()=>{console.log('hi')}, 3000) 
f() // 打印 hi 
f() // 技能冷却中

防抖

// 防抖就是「回城被打断」 
const debounce = (fn, time) => {
 let 回城计时器 = null
 return (...args)=>{ 
   if(回城计时器 !== null) { 
    clearTimeout(回城计时器) // 打断回城 }
    // 重新回城 
    回城计时器 = setTimeout(()=>{ 
       fn.call(undefined, ...args) // 回城后调用 fn 
       回城计时器 = null 
    }, time) 
  } 
}