這篇文章給大家分享的是有關(guān)Vue.js中debounce怎么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元廣德做網(wǎng)站,已為上家服務(wù),為廣德各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

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)稍作修改：

推薦專欄1
 
 ...
 
 推薦專欄2
 
 ...
 
 推薦專欄3
 
 ...
 

然后，我還需要監(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)
 },

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