防抖（JS的事件多次觸發(fā)，只執(zhí)行最后一次）

應(yīng)用場(chǎng)景： input輸入信息進(jìn)行搜索，如果每敲一個(gè)字符就請(qǐng)求后臺(tái)接口，給后臺(tái)的壓力太大了，所以做好防抖，即讓程序只執(zhí)行最后一次的事件。
為解決該問(wèn)題，探索到了兩個(gè)解決方案：

• 方案一：閉包防抖
  之前有看過(guò)用全局變量進(jìn)行防抖的案例，但個(gè)人認(rèn)為還是用閉包模塊化實(shí)現(xiàn)起來(lái)更完美，這樣業(yè)務(wù)層的代碼可以清晰展現(xiàn)出來(lái)，方便多人協(xié)作團(tuán)隊(duì)看懂代碼。

  <input type="text">

  <script>
    let inp = document.querySelector('input');

    inp.oninput = debounce(function() {
      console.log(this.value);  // 業(yè)務(wù)都在這里
    }, 500)

    function debounce(fn,delay) {
      let t = null;
      return function(){
        if (t!= null) {
          clearTimeout(t)
        }
        t = setTimeout(() => {
          // 這里注意 不能直接是fn() 因?yàn)閠his指向是window
          fn.call(this)
        }, delay)
      }
    }
  </script>

• 方案二：

直接使用lodash工具庫(kù)的debounce方法
參考網(wǎng)址：https://blog.csdn.net/qq_39139322/article/details/103295326

節(jié)流（控制高頻事件執(zhí)行次數(shù)）

應(yīng)用場(chǎng)景： 滾輪滾動(dòng)觸發(fā)事件頻繁，加上延遲可低頻觸發(fā)
看過(guò)了上面閉包防抖的寫法，下面閉包節(jié)流的寫法也很好理解了~

window.onscroll = throttle(function() {
      console.log('hello world');
    }, 500)
    function throttle (fn, delay) {
      let flag = true;
      return function () {
        if (flag) {
          setTimeout(() => {
            fn.call(this)
            flag = true
          },delay)
        }
        flag = false
      }
    }