博客 / 詳情

返回

Vue中如何使用debouce防抖函數

創建一個 debounced(防抖動)函數,該函數會從上一次被調用後,延遲 wait 毫秒後調用 func 方法。 debounced(防抖動)函數提供一個 cancel 方法取消延遲的函數調用以及 flush 方法立即調用。 可以提供一個 options(選項) 對象決定如何調用 func 方法,options.leading 與|或 options.trailing 決定延遲前後如何觸發(注:是 先調用後等待 還是 先等待後調用)。 func 調用時會傳入最後一次提供給 debounced(防抖動)函數 的參數。 後續調用的 debounced(防抖動)函數返回是最後一次 func 調用的結果。

Lodash debouce參數

  1. func  (Function) : 要防抖動的函數。
  2. [wait=0]  (number) : 需要延遲的毫秒數。
  3. [options=]  (Object) : 選項對象。
  4. [options.leading=false]  (boolean) : 指定在延遲開始前調用。
  5. [options.maxWait]  (number) : 設置 func 允許被延遲的最大值。
  6. [options.trailing=true]  (boolean) : 指定在延遲結束後調用。

    <template>
    <el-input
        v-model="value"
        size="mini"
        placeholder="請輸入.."
        clearable
        @keydown.enter="handleSearch"
      ></el-input>
    </template>
    <script>
    import _ from 'lodash'
    export default {
    data() {
        return { value: '' }
    },
    create() {
        this.handleSearch = _.debounce(() => {
          // 獲取列表
          this.getList();
        }, 300);
    },
    beforeDestroy() {
        // 取消該函數的防抖動調用
        this.handleSearch.cancel();
    },
    }
    </script>
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.