欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.js頁面中有多個input搜索框如何實現(xiàn)防抖操作

 更新時間:2019年11月04日 09:28:25   作者:熊孩子  
debounce是lodash工具庫中的一個非常好用的函數(shù)。這篇文章主要介紹了Vue.js頁面中有多個input搜索框如何實現(xiàn)防抖操作,需要的朋友可以參考下

debounce簡介

debounce是lodash工具庫中的一個非常好用的函數(shù)。在實現(xiàn)搜索框?qū)斎脒M(jìn)行動態(tài)查詢的時候,我們需要防止前端頻繁的發(fā)送查詢請求給后端,這個時候就需要用到debounce,它可以設(shè)置一個時間間隔,比如300ms,忽略300毫秒內(nèi)的輸入變化。debounce的詳細(xì)介紹可以參考 這篇 文章。

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進(jìn)行后臺查詢:

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ù)進(jìn)行防抖操作。而在何處調(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)文章

最新評論