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

☀️ 前言

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

🍀 防抖

🌰 举个例子

• 我们先抛开概念不谈，其实在生活中也有很多防抖的例子：
  • 比如你现在使用的电脑，在不使用后一段时间自动休眠
  • 当你再次使用的时候重新激活，并开始你设置的时间倒计时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(