防抖与节流防抖防抖（debounce):事件触发，延迟n秒后执行回调函数，延迟期间事件又被触发则重新计时（事件频繁触发

防抖

防抖（debounce):事件触发，延迟n秒后执行回调函数，延迟期间事件又被触发则重新计时（事件频繁触发，只执行最后一次）应用场景：搜索框

  <body>
    <input type="text" />
    <script>
      //防抖
      let inp = document.querySelector('input')
      inp.oninput = debounce(function () {
        console.log(this.value)
      }, 500)
      // 封装防抖
      function debounce(fn, delay) {
        let t = null
        return function () {
          if (t !== null) {
            clearTimeout(t)
          }
          t = setTimeout(() => {
            fn.call(this)
          }, delay)
        }
      }
    </script>
  </body>

节流

节流（throttle）:减少一段事件内事件的触发频率（在间隔时间内触发事件无效）

控制事件执行次数应用场景：

鼠标点击事件，不断点击，单位时间内只触发一次。
懒加载监听滚动条的位置，但是不必每次滑动都触发。可以降低计算的频率。

 <style>
      body {
        height: 2000px;
      }
    </style>
  </head>
  <body>
    <script>
      let flag = true
      window.onscroll = throttle(function () {
        console.log('123')
      }, 500)
      function throttle(fn, delay) {
        return function () {
          if (flag) {
            setTimeout(function () {
              fn.call(this)
              flag = true
            }, delay)
          }
          flag = false
        }
      }
    </script>