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

