防抖与节流，以及它们之间的区别

关于防抖与节流在网上也是众说纷纭，今儿个说一下个人的理解与总结。可能说的不对仅供参考。

1. 什么是防抖？
   触发高频率事件时n秒后只会执行一次回调,如果n秒内再次触发,则会重新计算时间。
   概述:每次触发时都会取消之前的延时调用。并从新计算
   使用场景：如内容模糊搜索时的搜索联想
   总结:在多次触发或者多次调用时，只执行最后一次

2. 什么是节流？
   概述：不管事件怎么触发，回调只会在一定时间后才会继续执行，
   使用场景：这里以手写轮播图为例，假设你现在写了一个轮播图，那么如果一直点上一页或者下一页就会有大量的切换，可能导致切换的过度动画卡顿，如果有定时器还会开启大量的定时器，那么就限制一下，只有当前切换操作完成后或者切换过度结束后才可以继续切换下一张，这个时候就可以用节流来限制，当然也可以使用过渡事件transitionend来处理办法有很多。
   总结：在指定时间内只执行一次，(如果觉得我说的太抽象，在内容最后我打个比方来具体描述一下节流的作用和用途)

3. 两者的区别：1 在高频触发或调用时只执行最后一次，2 在指定时间内只执行一次

上代码，不然空口无凭

防抖

      /**
       * 使用闭包原理实现防抖函数的封装
       * Callback 回调
       * delayTime 定时器执行时间
       */
      function debounceEvent(Callback, delayTime) {
        let timer = null
        return function (...agmes) {
          if (timer) clearTimeout(timer)
          timer = setTimeout(() => {
            Callback.apply(this, [...agmes])
          }, delayTime)
        }
      }
	  document.querySelector('input').oninput = debounceEvent(function (event) {
        console.log(this.value)
      }, 500)

节流

      /**
       * 使用闭包封装节流函数
       * Callback 回调
       * delayTime 间隔执行的时间/秒
       */
      function throttleEvent(Callback, delayTime) {
        // 上一次执行的时间，
        let constTime = 0
        // 可以认为时节流的阀门。
        let valve = false
        return function (...agmes) {
          let createTime = new Date().getTime()
          let day = (createTime - constTime) / 1000
          valve = !constTime || day > delayTime ? true : false
          if (valve) {
            Callback.apply(this, [...agmes])
            constTime = createTime
          }
        }
      }
	  document.querySelector('input').oninput = throttleEvent(function (event) {
        console.log(this.value)
      }, 3)

假设现在你家有一个水龙头，然后在你家还有一个控制水的总开发，总阀门。现在天气太热了限水了，你每次放水后总开关(阀门)就会自动关闭，关闭时间为10秒，10秒后总开关(阀门)会自动打开。 只有当阀门开启时，你才能放出水来。
怎么样，是不是很生动形象，哇哈哈我是逻辑鬼才，

点赞不迷路，不点赞踩我一下也行，