Vue.js頁面中有多個input搜索框如何實現防抖操做（使用debounce的正確姿式）

時間 2019-12-09

標籤 vue.js vue 頁面多個 input 搜索如何實現使用 debounce 正確欄目 JavaScript 简体版

原文原文鏈接

出處：原文由熊孩子於2019年10月23日發表在 Bloghome博客（www.bloghome.com.cn）javascript

debounce簡介

debounce是lodash工具庫中的一個很是好用的函數。在實現搜索框對輸入進行動態查詢的時候，咱們須要防止前端頻繁的發送查詢請求給後端，這個時候就須要用到debounce，它能夠設置一個時間間隔，好比300ms，忽略300毫秒內的輸入變化。debounce的詳細介紹能夠參考這篇文章。html

debounce的高級用法

博主的頁面中有3個搜索框，每一個搜索框都須要動態響應用戶的輸入到後臺去查詢匹配的文章，以下圖：
前端

在Vue.js中如何實現多搜索框的debounce綁定，下面博主就帶你們一塊兒來看一下：vue

1. 監聽輸入變量

上圖，能夠看到我有3個輸入框，每一個輸入框都須要設置一個變量來保存用戶的輸入：java

    data () {
      return {
        // 可用的文章列表
        columnItems: [],
        // 是否正在加載
        isLoading: [false, false, false],
        // 選擇框搜索輸入的值
        searchColumn1: '',
        searchColumn2: '',
        searchColumn3: ''
      }
    },

接下來，咱們把輸入變量綁定到輸入框上面。博主這裏使用的是vuetify的combobox，若是使用html原生的input框或者其餘框架的input元素，此處請稍做修改：es6

        <label>推薦專欄1</label>
        <v-combobox
          :items="columnItems"
          :loading="isLoading[0]"
          :search-input.sync="searchColumn1"
          ...
        >
        ...
        </v-combobox>
        <label>推薦專欄2</label>
        <v-combobox
          :items="columnItems"
          :loading="isLoading[1]"
          :search-input.sync="searchColumn2"
          ...
        >
        ...
        </v-combobox>
        <label>推薦專欄3</label>
        <v-combobox
          :items="columnItems"
          :loading="isLoading[2]"
          :search-input.sync="searchColumn3"
          ...
        >
        ...
        </v-combobox>

而後，我還須要監聽這幾個變量，若是發生改變則調用ajax進行後臺查詢：ajax

    watch: {
      searchColumn1 (val) {
        this.getColumns(val, 0)
      },
      searchColumn2 (val) {
        this.getColumns(val, 1)
      },
      searchColumn3 (val) {
        this.getColumns(val, 2)
      }
    },
    ...
    methods: {
      getColumns: function (searchValue, index) {
        // Items have already been requested
        if (this.isLoading[index]) return
        this.isLoading[index] = true

        let vm = this
        let options = {
          page: 1
        }

        if (searchValue) {
          options.title = searchValue.trim()
        } else {
          vm.columnItems = []
          vm.isLoading[index] = false
          return
        }

        // console.log(options)
        vm.$store.dispatch('getAllColumns', options).then(function (columns) {
          if (columns && columns.length) {
            vm.columnItems = columns
          }
          vm.isLoading[index] = false
        })
      }
    }

2. 添加debounce綁定

到目前爲止，咱們都尚未添加debounce，上面的邏輯也徹底走的通，可是運行後你會發現輸入操做運行的不流暢，若是打開dev-tools查看後臺調用，你會發現用戶輸入後出發了一長串的ajax調用。所以咱們引入debounce。此處，咱們只需把含有ajax調用的函數提交給debounce，告訴它對getColumns()函數進行防抖操做。而在何處調用debounce則是很是有講究的，錯誤的引入位置會使得debounce不起做用。請記住，debounce須要在created()鉤子中引入。typescript

    import _ from 'lodash'
    ...
    created: function () {
      this.getColumns = _.debounce(this.getColumns, 500)
    },

最後，博主想拋出一個小問題：「爲何必定要在created()鉤子中調用debounce呢，mounted()或者其餘的地方爲何不能夠呢？」，請知道的同窗留言或者發評論給我吧!
編程

參考資料