Vue.js中debounce怎么用

這篇文章給大家分享的是有關Vue.js中debounce怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

debounce簡介

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

debounce的高級用法

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

在Vue.js中如何實現多搜索框的debounce綁定，下面博主就帶大家一起來看一下：

1. 監聽輸入變量

上圖，可以看到我有3個輸入框，每個輸入框都需要設置一個變量來保存用戶的輸入：

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

接下來，我們把輸入變量綁定到輸入框上面。博主這里使用的是vuetify的combobox，如果使用html原生的input框或者其他框架的input元素，此處請稍作修改：

<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進行后臺查詢：

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()鉤子中引入。

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

感謝各位的閱讀！關于“Vue.js中debounce怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！