el-select延遲搜索debounce和throttle防抖

做名稱搜索時,根據輸入關鍵詞搜索,但是正常是一輸入就會觸發搜索,不合理

增加一個延時,減少頻繁調用搜索

lodash這個組件庫提供了很多實用的方法,其中就有debounce

lodash官網 https://www.lodashjs.com/docs/lodash.debounce

_.debounce(func, [wait=0], [options=])

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

使用

先引入 npm i loadash -D

<el-select
  v-model="value"
  multiple
  filterable
  remote
  reserve-keyword
  placeholder="請輸入關鍵詞"
  :remote-method="remoteMethod"
  :loading="loading">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

import debounce from 'lodash/debounce'

 // 防抖搜索
    remoteMethod(query) {
      const loadOptions = () => {
        console.log('發送請求啦---')
        if (query !== '') {
          this.loading = true;
          getProductNameList({name: query}).then(res => {
            console.log(2, res)
            this.loading = false
            this.options = res.data
          })
        } else {
          this.options = [];
        }
      } 
      debounce(loadOptions, 1000)()
    },

debounce對應還有一個throttle,兩者的區別是:debounce是觸發后不馬上調用,延遲n秒后調用;throttle是n秒內只能調用一次

throttle使用

<el-select
  v-model="value2"
  multiple
  filterable
  remote
  reserve-keyword
  placeholder="請輸入關鍵詞"
  :remote-method="remoteMethodThrottle"
  :loading="loading">
  <el-option
    v-for="item in options2"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

import throttle from 'lodash/throttle'

// 節流搜索
remoteMethodThrottle(query) {
  const loadOptions = () => {
    console.log('發送請求啦---')
    if (query !== '') {
      this.loading = true;
      getProductNameList({name: query}).then(res => {
        console.log(2, res)
        this.loading = false
        this.options2 = res.data
      })
    } else {
      this.options2 = [];
    }
  } 
  throttle(loadOptions, 1000)()
}

完整代碼

<template>
 <div>
   <h2>延時搜索,防抖與節流</h2>
  <p>從服務器搜索數據，輸入關鍵字進行查找,防抖處理(debounce),輸入1s后進行搜索</p>
  <div>
    <el-select
      v-model="value"
      multiple
      filterable
      remote
      reserve-keyword
      placeholder="請輸入關鍵詞"
      :remote-method="remoteMethod"
      :loading="loading">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-button @click="clickme">click</el-button>
    <el-button @click="debounced">click2</el-button>
    <div v-show="isshow">777</div>
  </div>
  <p>從服務器搜索數據，輸入關鍵字進行查找,節流處理(throttle),1s內最多搜索一次</p>
  <div>
    <el-select
      v-model="value2"
      multiple
      filterable
      remote
      reserve-keyword
      placeholder="請輸入關鍵詞"
      :remote-method="remoteMethodThrottle"
      :loading="loading">
      <el-option
        v-for="item in options2"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
 </div>
</template>

<script>
import debounce from 'lodash/debounce'
import throttle from 'lodash/throttle'
import { getProductNameList } from '@/service/list'

export default {
  data () {
    return {
      options: [],
      options2: [],
      value: [],
      value2: [],
      list: [],
      loading: false,
      isshow: false,
      debounced: debounce(() => {
        console.log(9999)
        this.isshow = true
      }, 400)
    }
  },

  created(){
    
  },

  methods: {
    clickme() {
      // console.log(11)
      debounce(() => {
        console.log(9999)
        this.isshow = true
      }, 500)()
    },
    // 防抖搜索
    remoteMethod(query) {
      const loadOptions = () => {
        console.log('發送請求啦---')
        if (query !== '') {
          this.loading = true;
          getProductNameList({name: query}).then(res => {
            console.log(2, res)
            this.loading = false
            this.options = res.data
          })
        } else {
          this.options = [];
        }
      } 
      debounce(loadOptions, 1000)()
    },

    // 節流搜索
    remoteMethodThrottle(query) {
      const loadOptions = () => {
        console.log('發送請求啦---')
        if (query !== '') {
          this.loading = true;
          getProductNameList({name: query}).then(res => {
            console.log(2, res)
            this.loading = false
            this.options2 = res.data
          })
        } else {
          this.options2 = [];
        }
      } 
      throttle(loadOptions, 1000)()
    }
  }
}
</script>