逐步解析防抖与节流

防抖

防抖：
事件被触发，规定时间后再执行回调
如果规定时间内再触发，则重新计算规定时间
直到规定时间内无触发，才再一次执行回调

举个生活中的例子，外面很多便利店、酒店、餐厅等都会有自动感应门，人靠近感应门就会触发开门时间，一定时间后就会关门。
假如有家店有个感应门，规定开门5秒后关门，现在陆续有客人进入这家店：
第一批客人要进去，门开了，（5,4,3,2,1）5秒内没有人再进来，门关闭；
第二批客人要进去，门开了，（5,4,3）等到第三秒又有一批客人要进，门没关，而是则重新计算5秒（5,4,3,2）,等到第四秒又有一批客人要进，门没关，而是又重新计算时间…
（5,4,3,2,1）终于过了5秒没人进来了，门关闭。

用一个伪流程图来表示就是这样的：

流程图看似很简单，用代码实现却处处有坑，来一步步实现吧。
简单实现一下点击感应门的防抖功能：

  <button>点击开门</button>
  
  <script>
    const btn = document.querySelector("button")

    // 关门事件
    function closeDoor(){
   
      console.log('关门');
    }

    // 点击开门
    btn.addEventListener("click", openDoor)
  </script>

最开始的功能只能不断开门，然后不断返回“关门回调”，没有任何优化，接下来就开始设置防抖函数吧

	const btn = document.querySelector("button")

    // 关门事件
    function closeDoor(){
   
      console.log('关门');
    }

    // 防抖函数,将关门事件传入作为参数
    function debounce(fn){
   
      // 为了避免没点击就立即执行
      // 我们返回一个匿名函数
      // 来达到点击才会执行的效果
      return function(){
   
      console.log("门已开")
       fn()
      }
    }
    
    // 点击开门
    btn.addEventListener("click", debounce(closeDoor))

接下来就是设置延时了

    // 防抖函数,将关门事件传入作为参数
    // 点击按钮“开门”，2秒后触发关门事件
    function debounce(fn, delay){
   
      return function(){
   
      console.log(&#