[借鉴文章](前端性能优化篇： 防抖和节流 - 掘金 (juejin.cn))

防抖节流的意义：

• 当函数绑定一些持续触发的事件如：scroll、mousemove ，键盘输入，多次快速click等等，
• 如果每次触发都要执行一次函数，会带来性能下降，资源请求太频繁等问题
• 可以提高计算机性能，提升用户体验

1. 防抖

• 所谓防抖，就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

• 代码演示：

 /**
     * 此例演示想要在控制台输出111
     * 点击之后首先清除延时器
     * 紧接着设置一个延时器
     * 只要在一秒内连续点击，延时器就不会被触发
     * 只有点击间隔超过一秒才会触发延时器在控制台输出111
    */
const btn = document.querySelector('.btn')
    let timeId
    btn.addEventListener('click', ()=>{
      clearTimeout(timeId)//清除延迟器
      timeId = setTimeout(()=>{
        console.log(111)
      },1000)
    })
}

2. 节流

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。 节流会稀释函数的执行频率

• 代码演示：

/**
     * 此例演示想要在控制台输出111
     * 点击之后首先判断是否有延时器
     * 没有则定义一个延时器
     * 延迟器执行时，在最后令timeId为空
     * 可以使1s后再次点击可以重新设置延时器
     * 以此达到1s内只能输出一次111
    */
    const btn = document.querySelector('.btn')
    let timeId
    btn.addEventListener('click', ()=>{
      if(!timeId){
        timeId = setTimeout(()=>{
        console.log(111)
        timeId = null
      },1000)
      }
    })

总结：

防抖节流可以提高浏览器性能，提升用户体验感。本人学历尚浅，此文适合初学者查阅。简单易懂！