一杯茶的时间，带你彻底学会手写防抖节流_手写防抖节流函数,实现倒计时功能

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

• 我们上面的使用电脑可以理解为触发事件，而与我上面标注的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(){
    fun()
  }
}
addBtn.addEventListener('click',debounce(addOne))

• 上面我们用闭包处理了一下addOne函数，接下来我们需要添加一个延时器setTimeout来倒计时，当我们点击按钮后过2s再执行。

// debounce.js
function debounce(fun,time){
  return function(){
    setTimeout(()=>{
      fun()
    },time)
  }
}
addBtn.addEventListener('click',debounce(addOne,2000))

• 现在延时的目的是达到了但是每次点击都会新增一个新的setTimeout而且并不能达到我们多次点击只执行一次的效果。
• 这时候就需要clearTimeout登场了，我们需要在我们点击了按钮后也就是debounce执行时要先把之前的setTimeout先清除再重新计时。

function debounce(fun,time){
  let timer
  return function(){
    clearTimeout(timer)
    timer=setTimeout(()=>{
      fun()
    },time)
  }
}

• 现在我们的一个防抖功能就完成了，但是这还没完，如果我们在addOne()打印this会发现我们这样执行的this是指向Window的。
• 这当然不是我们所希望的，我们需要使用apply来改变this指向，再者就是我们需要考虑到执行函数的参数，因为不同的函数肯定会有不同的参数传入,对于参数我们可以使用arguments处理。

function debounce(fun,time){
  let timer
  return function(){
    clearTimeout(timer)
    let args = arguments
    timer=setTimeout(()=>{
      fun.apply(this,args)
    },time)
  }
}

• 这样我们的防抖函数就手写完成了，看起来其实也并不难。

• 总而言之防抖就是在不断的操作中（输入、点击等）最终只执行一次的一种提高性能的方法。

🍁 节流

🌰 举个例子

• 当然我们生活中也会有很多节流的的例子，不知道大家有没有留意过公园的洒水机：
  • 一般我们会给洒水机设定一个时间假设30min
  • 当距离上次洒水时间未够30min的时候一直保持静止状态
  • 而当到了30min则会触发洒水的事件

• 这其实也是节流的最基本的概念了，说白了就是在间隔一段时间执行一次
• 我们上面的洒水可以理解为触发事件，而我们上面标注的其他信息也就只有30min和当前时间，这两个就是节流的主要要素了。
• 当然上面的是我们的生活中的例子，那我们在我们的日常开发中其实也经常用到，比如我们滚动鼠标滚轮监听滚动条位置，防止按钮多次点击等。

✍️ 手写节流

• 说了这么多，相信大家大概理解了节流的概念，那我们现在来实现一个节流吧，假设我们现在要实现一个鼠标滚动打印事件，想让它在3s执行一次，这时候我们该怎么写呢？

• 首先我们先模拟一个触发事件。

// throttle.js
function scrollTest(){
  console.log('现在我触发了')
}
document.addEventListener('scroll',scrollTest)

• 接下来我们封装一个节流函数，跟防抖一样我们也需要利用闭包，顺便再加一个参数接收节流时间。

// throttle.js
...
function throttle(fun,time){
  return function(){
    fun()
  }
}
document.addEventListener('scroll',throttle(scrollTest,3000))

• 因为我们的节流是在一段时间内执行一次也就是说如果两次鼠标滚动的时间间隔未到所设置的时间则不执行。
• 那我们可以记录一下每次滚动的时间戳来进行对比。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

做到真正的技术提升。**

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！