Vue.js頁面中有多個input搜索框如何實現(xiàn)防抖操作
debounce簡介
debounce是lodash工具庫中的一個非常好用的函數(shù)。在實現(xiàn)搜索框?qū)斎脒M行動態(tài)查詢的時候，我們需要防止前端頻繁的發(fā)送查詢請求給后端，這個時候就需要用到debounce，它可以設(shè)置一個時間間隔，比如300ms，忽略300毫秒內(nèi)的輸入變化。debounce的詳細介紹可以參考 這篇 文章。
debounce的高級用法
博主的頁面中有3個搜索框，每個搜索框都需要動態(tài)響應(yīng)用戶的輸入到后臺去查詢匹配的文章，如下圖：
在Vue.js中如何實現(xiàn)多搜索框的debounce綁定，下面博主就帶大家一起來看一下：
1. 監(jiān)聽輸入變量
上圖，可以看到我有3個輸入框，每個輸入框都需要設(shè)置一個變量來保存用戶的輸入：
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>
然后，我還需要監(jiān)聽這幾個變量，如果發(fā)生改變則調(diào)用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，上面的邏輯也完全走的通，但是運行后你會發(fā)現(xiàn)輸入操作運行的不流暢，如果打開dev-tools查看后臺調(diào)用，你會發(fā)現(xiàn)用戶輸入后出發(fā)了一長串的ajax調(diào)用。因此我們引入debounce。此處，我們只需把含有ajax調(diào)用的函數(shù)提交給debounce，告訴它對getColumns()函數(shù)進行防抖操作。而在何處調(diào)用debounce則是非常有講究的，錯誤的引入位置會使得debounce不起作用。請記住，debounce需要在created()鉤子中引入。
import _ from 'lodash'
...
created: function () {
this.getColumns = _.debounce(this.getColumns, 500)
},
最后，博主想拋出一個小問題：“為什么一定要在created()鉤子中調(diào)用debounce呢，mounted()或者其他的地方為什么不可以呢？”，請知道的同學(xué)留言或者發(fā)評論給我吧!
轉(zhuǎn)自：https://www.bloghome.com.cn/user/xionghaizi
作者: 熊孩子
相關(guān)文章
vue單頁應(yīng)用的內(nèi)存泄露定位和修復(fù)問題小結(jié)
系統(tǒng)進程不再用到的內(nèi)存，沒有及時釋放，就叫做內(nèi)存泄漏（memory leak）。這篇文章主要介紹了vue單頁應(yīng)用的內(nèi)存泄露定位和修復(fù),需要的朋友可以參考下2019-08-08
今天小編就為大家分享一篇vue動態(tài)禁用控件綁定disable的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue中實現(xiàn)深度監(jiān)聽的方法小結(jié)
在Vue中,深度監(jiān)聽是一種非常常見且重要的功能,它可以讓我們監(jiān)聽對象內(nèi)部的所有屬性,并對這些屬性的變化做出相應(yīng)的處理,在本篇博客中,我將為大家介紹Vue中如何實現(xiàn)深度監(jiān)聽的方法,需要的朋友可以參考下2024-09-09
解決vue-element-admin中配置跨域出現(xiàn)的問題
這篇文章主要介紹了解決vue-element-admin中配置跨域出現(xiàn)的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
在vue.config.js中優(yōu)化webpack配置的方法
在日常開發(fā)中我們離不開打包工具webpack,但是不同的配置會影響我們項目的運行構(gòu)建時間,也會影響打包之后項目包的大小,這篇文章記錄一下我使用過的可以優(yōu)化webpack的配置,需要的朋友可以參考下2024-05-05
這篇文章主要和大家一起聊一聊Vue.js過渡效果、CSS 過渡效果、純 JavaScript過渡效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了elementPuls 表格反選實現(xiàn)示例代碼,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07
這篇文章主要介紹了詳解Vue內(nèi)部怎樣處理props選項的多種寫法，詳細的介紹了props的使用的寫法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vue項目的甘特圖組件之dhtmlx-gantt使用教程和實現(xiàn)效果展示(推薦)
文章介紹了如何使用dhtmlx-gantt組件來實現(xiàn)公司的甘特圖需求,并提供了一個簡單的Vue組件示例,文章還分享了一些配置項,如格式化表頭日期、設(shè)置甘特圖尺寸、啟用只讀模式、設(shè)置表格列等,感興趣的朋友一起看看吧2025-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)3D環(huán)形圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03