Vue節流的原理及應用

一、Vue節流方法

Vue的節流方法是指在某個時間間隔內只執行一次函數。這個方法適用於那些需要頻繁觸發的 DOM 事件函數，如scroll，mousemove等。節流的原理是設置一個定時器，在定時器內執行函數，每次函數執行完畢後清除定時器，再次觸發時重新設置定時器。

二、Vue節流封裝

Vue的節流可用以下封裝代碼，這樣就可以直接在 Vue 實例中調用：

Vue.prototype.$throttle = function(fn, delay) {
  let lastTime = 0;
  return function() {
    let nowTime = new Date().getTime();
    if (nowTime - lastTime > delay) {
      fn.apply(this, arguments);
      lastTime = nowTime;
    }
  };
};

使用時可以這樣:

// 定義事件函數
function handleScroll() {
  console.log("scrolling");
}
// 傳入事件函數和時間間隔
window.addEventListener("scroll", this.$throttle(handleScroll, 1000));

三、Vue節流防抖

Vue的節流防抖是指在函數觸發後，在規定時間之內再次觸發將被忽略。這個方法適用於那些頻繁觸發的函數事件，如輸入框的輸入事件，對於一些用戶需要輸入，但是輸入過快會導致頻繁的數據更新請求，可以使用節流防抖以減少請求次數。

防抖的原理是使用 setTimeout 函數，每次觸發時清除一個定時器，如果在指定時間間隔內再次觸發則重新設置定時器。

Vue.prototype.$debounce = function(fn, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
};

使用時可以這樣：

// 定義事件函數
function handleInput() {
  console.log("inputting");
}
// 傳入事件函數和時間間隔
this.$refs.input.addEventListener("input", this.$debounce(handleInput, 500));

四、Vue節流閥

Vue的節流閥是一個很實用的功能，主要用於控制短時間內多次請求。它可以控制一段時間內最多可以請求幾次，達到限制後會自動暫停。這個功能適用於那些用戶觸發頻率高，但是並不需要每個都更新後端數據的情況，適用於推薦列表，熱門搜索等。

Vue.prototype.$createThrottleValve = function(limitCount, limitTime) {
  const records = [];
  let timer = null;
  return function(fn) {
    const now = Date.now();
    records.push(now);
    if (records.length > limitCount) {
      const removeCount = records.findIndex(
        (time) => now - time = limitCount) {
      clearTimeout(timer);
      const firstTime = records[0];
      const diffTime = limitTime - (now - firstTime);
      timer = setTimeout(() => {
        fn();
      }, diffTime);
      return;
    }
    fn();
  };
}

使用時可以這樣：

// 定義事件函數
function handleHotSearch() {
  console.log("request hot search");
}
// 傳入事件函數和請求限制
const throttleValve = this.$createThrottleValve(5, 1000);
this.$refs.hotSearch.addEventListener("click", function() {
  throttleValve(handleHotSearch);
});

五、Vue節流只執行最後一次接口

Vue的節流還可以只執行最後一次接口。這個方法適用於在一些需要連續觸發請求的場景下，只需要保留最後一次的數據更新即可。還是使用 setTimeout 函數來實現的，但是需要注意到如果設置間隔時間太短則不會執行兩次，需要根據實際場景調整時間。

Vue.prototype.$onlyLastReq = function(fn, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
};

使用時可以這樣：

// 定義事件函數
function handleUpdate() {
  console.log("request update");
}
// 傳入事件函數和時間間隔
window.addEventListener("scroll", this.$onlyLastReq(handleUpdate, 500));

六、Vue節流指令

對於一些頻繁觸發的 DOM 事件，還可以使用 Vue 的自定義指令來實現節流。在註冊指令時可以通過參數傳入時間間隔，對於同一 DOM 元素，限制時間間隔內只能被觸發一次。

Vue.directive('throttle-click',{
  inserted:function(el,binding){
    let delay = binding.arg || 600
    let timer
    el.addEventListener('click', () => {
      if(!timer){
        timer = setTimeout(() => {
          timer = null
          binding.value()
        }, delay)
      }
    })
  }
})

使用時可以這樣：

Click Me

七、Vue節流防抖插件

Vue還有很多優秀的開源插件可供使用，其中就有很多封裝了 Vue 的節流或防抖功能。

如 lodash 的 debounce 函數：

import _ from 'lodash'

export default {
  methods:{
    handleClick: _.debounce(function(){
      console.log('click')
    }, 1000)
  }
}

使用時可以這樣：

Click Me

八、Vue節流按鈕

Vue 的節流按鈕是一個非常實用的功能，可以在限制時間內防止按鈕重複點擊。可以使用組件封裝的方式來實現節流按鈕。

  
    {{ buttonText }}
  



export default {
  props: {
    handler: { type: Function, required: true },
    delay: { type: Number, default: 300 },
    text: { type: String, default: "Click" },
  },
  data() {
    return {
      isThrottling: false,
    };
  },
  computed: {
    buttonText() {
      return this.isThrottling ? `${this.text}ing...` : this.text;
    },
  },
  methods: {
    runHandler() {
      if (!this.isThrottling) {
        this.isThrottling = true;
        this.handler();
        setTimeout(() => {
          this.isThrottling = false;
        }, this.delay);
      }
    },
  },
};

使用時可以這樣：

九、Vue節流函數失效選取

在使用 Vue 的節流或防抖方法時，需要根據不同實際情況和業務需求選擇不同的節流方法，避免出現無效操作和效果不佳的情況。

節流方法的間隔時間不能過長或過短，過長會影響用戶的體驗，過短會導致觸發事件太頻繁，失去節流效果。

防抖方法的間隔時間也不能過長或過短，過長會導致用戶輸入有延遲的感覺，過短則會導致多次請求，降低性能。

同時，需要根據實際業務需求選擇節流閥或只保留最後一次接口等方法，避免頻繁請求和更新。

總結

Vue提供了多種節流防抖方法和插件，可以用來優化用戶體驗和提高性能。需要根據實際業務需求選擇不同的節流方法，避免出現無效操作和效果不佳的情況。