vue+element ui框架里怎么實現lodash的debounce防抖

本篇內容介紹了“vue+element ui框架里怎么實現lodash的debounce防抖”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

事情起因在：我使用element ui框架里的遠程搜索框，在單選時，組件內部已經做了防抖，query是在一段時間內的字符串。但是在多選時，并沒有做防抖，而是每輸入一個字符都要向后臺發一次請求，所以必須防抖，官方推薦使用lodash的debounce

在解決這個問題時，我遇到的坎兒主要有以下：

我首先在項目里用npm安裝lodash，先全局安裝，然后安裝到項目

npm install -g lodash
npm install --save lodash

安裝后，我就在我要用防抖的組件里，引入lodash

var lodash = require('lodash');

以下就開始了走彎路

我百度后，查詢到debounce總和keyup一起使用，所以我就在我的搜索框里綁定了keyup事件，但是綁定的事件并沒有生效，通過查詢得知，在element ui封裝了input，所以要在后面加上.native才可以覆蓋原來的事件

<el-select
  v-model="AddCandidateFrom.follow_hr"
  filterable
  multiple
  placeholder="請選擇跟進HR"
  @keyup.native="getRemoteFollow"
  :loading="followLoading"
  class="select-item">
  <el-option
    v-for="item in followOption"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

keyup成功綁定事件后，我發現得到的結果并不是我想要的，因為keyup綁定事件里得到的參數是我在鍵盤里輸入的一個字符，但我想要得到的是輸入后的整個字符串。所以我就又開始使用watch監聽this.AddCandidateFrom.follow_hr

監聽this.AddCandidateFrom.follow_hr后，我發現并沒有用，因為它代表的是多選框中已經選中了的字符串，正在輸入的字符串不會記錄進去，所以我又回退到使用遠程搜索本身的方法，綁定remote-methods

<el-select
  v-model="AddCandidateFrom.follow_hr"
  filterable
  multiple
  remote
  placeholder="請選擇跟進HR"
  :remote-method="getRemoteFollow"
  :loading="followLoading"
  class="select-item">
  <el-option
    v-for="item in followOption"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

綁定了remote-method方法后，我就使用傳統的方法定義綁定的方法（），沒有使用es6簡寫的方法，這是因為，使用lodash.debounce返回的是一個函數。如果有參數，則在function空的形參列表里加入

getRemoteFollow: lodash.debounce(function () {
  console.log('111');
}, 300),

“vue+element ui框架里怎么實現lodash的debounce防抖”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！