前言
本文實現了一個實時搜索框的函數節(jié)流,通過vue自定義指令v-debounce實現。原本,如果我們想做一個實施搜索,那么會直接用@keyup=search,這樣就會非常耗性能,鍵盤敲一下,就會調用一次search事件,如果是ajax請求,那么會非常不友好,所以通過v-debounce,則可以在鍵盤連續(xù)敲擊的時候組織運行,停留300毫秒才執(zhí)行.
通過vue的自定義指令,還可以將其掛載在全局,那樣就能全局通過v-debounce調用了.這個比傳統(tǒng)方法簡單很多,不需要call,apply之類的.
代碼實現
<template>
<div>
<input
type="text"
v-model="text"
v-debounce="search"
>
</div>
</template>
<script>
export default {
name: 'debounce',
data () {
return {
msg: 'Welcome to Your Vue.js App',
text: '',
count: 1
}
},
directives: {
debounce: {
inserted: function (el, binding) {
let timer
el.addEventListener('keyup', () => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
binding.value()
}, 300)
})
}
}
},
methods: {
search () {
// 實際要進行的操作 axios.get('')之類的
this.count++
console.log('count is:' + this.count)
}
}
}
</script>
