vue中使用防抖函數

一、基本概念

在事件被觸發n秒後再執行回調，如果在這n秒內又被觸發，則重新計時，計時結束執行回調。（通俗來說就是當持續觸發某事件時，一定時間間隔內沒有再觸發事件時，事件處理函數纔會執行一次，如果設定的時間間隔到來之前，又一次觸發了事件，就重新計時，計時結束執行回調）。
        函數防抖的基本思想是設置一個定時器，在指定時間間隔內運行代碼時清楚上一次的定時器，並設置另一個定時器，知道函數請求停止並超過時間間隔纔會執行。

二、使用

1、直接使用

const debounce = (function() {
  let timer = 0;
  return function(callback, ms = 200) {  //設置默認200ms
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();

export default {
     methods: {
        setNavLeft() {
          delay(async () => {
            let navleft =
              parseInt(this.$refs.navr.getBoundingClientRect().left) + 846 + "px";
            this.$refs.navdiv.style.left = navleft;
          }, 100);
        },
     }
}

2、封裝爲公用方法

第一步，在utils文件夾下建立index.js文件

// index.js
export default {
  debounce(fn, delay = 300) {   //默認300毫秒
    let timer;
    return function () {
      let args = arguments;
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        fn.apply(this, args);   // this 指向vue
      }, delay);
    };
  }
}

第二步，組件內引入該js

import publicFn from '@/utils/index'

第三步，組件的methods方法進行調用

methods: {
 //開始調用
 moveOver: index.debounce(function () {
      ++this.count;
      console.log(this.count)
   }, 200),
}