防抖（vue防抖使用）

防抖：多次觸發事件后，事件處理函數只執行一次，並且是在觸發操作結束時執行

使用場景：頻繁觸發事件，搜索框輸入值，及滾動條觸發事件

實現代碼：

1.為了我們方便使用防抖我們需要重復書寫同樣代碼，可以封裝一個方法utils.js

2.防抖一共有兩個版本一種是立即執行一種是非立即執行

第一種：非立即執行：

非立即執行版的意思是觸發事件后函數不會立即執行，而是在 n 秒后執行，如果在 n 秒內又觸發了事件，則會重新計算函數執行時間。

export function debounce(fn,timerDelay){
  var timerDelay=timerDelay||300;
  var timer;
  return function (){
     var that=this;
     var params=arguments;
    if(timer) clearTimeout(timer)
    timer=setTimeout(()=>{
      fn.apply(that,params)
     },timerDelay)
 }
}

立即執行：

立即執行版的意思是觸發事件后函數會立即執行，然后 n 秒內不觸發事件才能繼續執行函數的效果。

function debounce(fn,timerDelay) {
  let timer;
  return function () {
      let that = this;
      let params = arguments;

      if (timer) clearTimeout(timer);

      let callNow = !timer;
      timer = setTimeout(() => {
          timeout = null;
      }, wait)

      if (callNow) fn.apply(that, params)
  }
}

如果給他們封裝成一個方法那么需要一個開關來選擇立即執行和非立即執行

/**
 * @desc 函數防抖
 * @param fn 函數
 * @param timerDelay 延遲執行毫秒數
 * @param immediate true 表立即執行，false 表非立即執行
 */
function debounce(fn,timerDelay,immediate) {
  let timer;
  return function () {
      let that = this;
      let args = arguments;

      if (timer) clearTimeout(timer);
      if (immediate) {
          var callNow = !timer;
          timer = setTimeout(() => {
            timer = null;
          }, timerDelay)
          if (callNow) fn.apply(that, args)
      }
      else {
        timer = setTimeout(function(){
          fn.apply(that, args)
          }, timerDelay);
      }
  }
}

以上就是防抖

 在vue中使用

import { debounce } from "src/utils/utils";
method:{
  fn: debounce(function() {
     //邏輯代碼
    }, 2000),
}