欧美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行動態(tài)查詢的時候，我們需要防止前端頻繁的發(fā)送查詢請求給后端，這個時候就需要用到debounce，它可以設置一個時間間隔，比如300ms，忽略300毫秒內(nèi)的輸入變化。debounce的詳細介紹可以參考 這篇 文章。

debounce的高級用法

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

 

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

1. 監(jiān)聽輸入變量

上圖，可以看到我有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>

然后，我還需要監(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()或者其他的地方為什么不可以呢？”，請知道的同學留言或者發(fā)評論給我吧!

 轉(zhuǎn)自：https://www.bloghome.com.cn/user/xionghaizi

作者: 熊孩子

相關(guān)文章

最新評論