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

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

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

npm install -g lodashnpm 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防抖就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網之家。