在做搜索功能的时候,我们不希望input框中值一改变,就马上去请求数据,而是在指定间隔内没有输入时,才会执行函数。在指定时间间隔里输入,会清除定时器,重新计时。这就是函数防抖。
因为我们可能在input框中的值还没有输完,这个时候,增加一个字符,就发送一次请求,这样太消耗程序,可能出现卡顿的情况。
因此,实时监听input值的变化,输入一个字符,200ms后再去获取input中的输入值。
例如,在input框中连续输入aaaaa,如果实时监听,值就是a, aa, aaa, aaaa, aaaaa,发送的就是五次请求。如果200ms后获取值,可能就是aaaaa。这样就只能发送一次请求。
<template>
<div class="search-box">
<input class="box"
:placeholder="placeholder"
v-model="query"
>
</div>
</template>
<script type="text/ecmascript-6">
import { debounce } from 'common/js/util'
export default {
props: {
placeholder: {
type: String,
default: '搜索歌曲、歌手'
}
},
data() {
return {
query: ''
}
},
created() {
this.$watch('query', debounce((newQuery) => {
this.$emit('query', newQuery)
}, 200))
}
}
</script>
util.js:
export function debounce(func, delay) {
let timer
return function (...args) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
func.apply(this, args)
}, delay)
}
}