2. 什么是防抖和节流，他们的应用场景有哪些

最新推荐文章于 2024-07-10 19:58:24 发布

ChrisP3616

最新推荐文章于 2024-07-10 19:58:24 发布

阅读量477

点赞数 2

分类专栏：前端工程师每日一题文章标签： js 内存优化 es6/es7 面试

本文链接：https://blog.csdn.net/qq_43456781/article/details/119033372

版权

本文探讨了JavaScript中的防抖(debounce)和节流(throttle)技术，它们用于控制事件处理的频率。防抖常用于登录、发短信按钮防止多次请求，窗口resize事件，以及文本编辑器的实时保存。节流则适用于滚动事件、播放进度更新和输入框实时搜索。文章通过代码示例展示了两种技术的实现，并总结了它们的主要区别和业务场景。

摘要由CSDN通过智能技术生成

2. 什么是防抖和节流，他们的应用场景有哪些

2.1 解答一

2.1.1 防抖 (debounce)

防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。

想要了解一个概念，必先了解概念所应用的场景。在 JS 这个世界中，有哪些防抖的场景呢

登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
文本编辑器实时保存，当无任何更改操作一秒后进行保存

代码如下，可以看出来防抖重在清零 clearTimeout(timer)

function debounce (f, wait) {
   
  let timer
  return (...args) => {
   
    clearTimeout(timer)
    timer = setTimeout(() => {
   
      f(...args)
    }, wait)
  }
}