函数防抖节流剖析

1.防抖（在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。）
       函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会重新读条。
       当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，
       如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。
       应用场景：
      点击按钮发送请求时，防止重复多次点击一个按钮发送多个请求
       search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
       window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
      模拟一段ajax请求
      function ajax(content) {
        setTimeout(() => {
          console.log('ajax request :' + content)
        }, 1000)
      }
       正常情况下 你点多少次 请求便会发送多少下 实际情况会出现点击一个按钮 请求过慢时 再次点击 会造成2次请求,从而出现一些报错问题
      let inputa = document.getElementById('debounce')
      inputa.addEventListener('click', function (e) {
        ajax(e.target.value)
      })
       防抖情况下 当你在频繁的点击时，并不会发送请求，只有当你在指定间隔内没有点击，才会执行函数。如果停止点击但是在指定间隔内又点击，会重新触发计时
      let inputb = document.getElementById('bounce')
      let bounce = (fn, time) => {
        var timeid = null
        return function (...args) {
          if (timeid) {
            clearTimeout(timeid) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
            timeid = setTimeout(() => {
              fn(args)
            }, time)
          } else {
            timeid = setTimeout(() => {
              fn(args)
            }, time) // 进入该分支说明当前并没有在计时，那么就开始一个计时
          }
        }
      }
      let sendAjax = bounce(ajax, 500)
      inputb.addEventListener('click', function (e) {
        sendAjax('参数1', '参数2', '参数3', e.target.value)
      })
       2.节流 （规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。）
       函数节流就是fps游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹。
       应用场景：
       鼠标不断点击触发，mousedown(单位时间内只触发一次)
       监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
      let inputc = document.getElementById('throttle')
      let throt = (fn, time) => {
        var timeOt = null
        return function (...arg) {
          if (!timeOt) {
            timeOt = setTimeout(() => {
              let args = [...arg]
              fn(args)
              timeOt = null
            }, time)
          }
        }
      }
      let sendAjaxc = throt(ajax, 1500)
      inputc.addEventListener('click', function (e) {
        sendAjaxc('参数1', '参数2', '参数3', e.target.value)
      })