vue 使用防抖和節流

// 防抖
export const debounce= (func, wait) => {
    var timeout;

    return function () {
        var context = this;
        var args = arguments;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
};

// 節流
export const throttle = (fn, wait) => {
    let canRun = true; // 通過閉包保存一個標記
    return function () {
      if (!canRun) return; // 在函數開頭判斷標記是否為true，不為true則return
      canRun = false; // 立即設置為false
      setTimeout(() => { // 將外部傳入的函數的執行放在setTimeout中
        fn.apply(this, arguments);
        // 最后在setTimeout執行完畢后再把標記設置為true(關鍵)表示可以執行下一次循環了。當定時器沒有執行的時候標記永遠是false，在開頭被return掉
        canRun = true;
      }, wait);
    };
  }

////////////////////////////////////////////////////////// .vue文件中引用兩個方法后直接使用
methods:{
    clickFun: throttle (function(){
    ...........邏輯代碼.........
     },1000),
}

防抖：觸發高頻事件后n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。
應用：因為防抖的特性，一直執行最后一次的觸發，所以可以用於鼠標移動確定最后一次移動的時候的坐標位置。

節流：高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函數的執行頻率

應用：因為節流是監聽到第一次觸發事件后就執行，所以可以用來防止按鈕多次點擊執行多次，且按照第一次點擊的事件為准