一杯茶的时间，带你彻底学会手写防抖节流

最新推荐文章于 2025-02-01 16:13:32 发布

快跑啊小卢_

最新推荐文章于 2025-02-01 16:13:32 发布

阅读量572

点赞数 59

分类专栏： javascript 文章标签： javascript html5 面试

本文链接：https://blog.youkuaiyun.com/vergil_/article/details/120649136

版权

本文通过生活中的实例解释了防抖和节流的概念，并详细介绍了如何手写JavaScript的防抖和节流函数，适用于性能优化场景，如表单提交、页面尺寸变化等。文章最后提供了一个直观的判断标准：防抖在多次触发后只执行一次，节流则按固定间隔执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

☀️ 前言

前段时间群友说面试的时候老是分不清防抖和节流。
其实防抖和节流不仅仅在面试中会让大家手写，在实际项目中也可以起到性能优化的作用，所以还是很有必要掌握的。
接下来我就用一杯茶的时间带大家彻底学会手写防抖和节流。

🍀 防抖

🌰 举个例子

我们先抛开概念不谈，其实在生活中也有很多防抖的例子：
- 比如你现在使用的电脑，在不使用后一段时间自动休眠
- 当你再次使用的时候重新激活，并开始你设置的时间倒计时10分钟
- 在这10分钟内你继续使用电脑又会重新开始倒计时10分钟
- 当你最后一次使用电脑并离开时重新倒计时10分钟过去了，电脑就休眠了

这其实这就是防抖的基本概念了~说白了就是在一段时间只执行一次，也就是我们上面的电脑只打开这一次。
我们上面的使用电脑可以理解为触发事件，而与我上面标注的setTimeout和clearTimeout其实就是防抖的主要要素了。
当然上面的是生活中的例子，那我们在我们的日常开发中其实也经常用到，比如我们调整页面的大小，验证表单某个字段是否重复时发生请求次数控制，防止表单多次提交等。

✍️ 手写防抖

说了这么多，相信大家大概理解了防抖的概念，那我们现在来实现一个防抖吧，假设我们要点击一个按钮新增一条信息，当然我们不希望每次点击都调用接口新增，我们希望多次点击只新增一次，这时候我们该怎么写呢？

首先我们先简单的模拟一个按钮被点击的过程。

// debounce.js
let addBtn=document.getElementById('add')
function addOne(){
   
  console.log('增加一个')
}
addBtn.addEventListener('click',addOne)

因为我们需要对执行的事件进行处理所以接下来我们需要封装一下addOne函数。

// debounce.js
let addBtn=document.getElementById('add')
function addOne(){
   
  console.log('增加一个')
}
function debounce(fun){
   
  return function(