使用element-ui
的input
时,需求是输入值有变化时就进行事件绑定。
有一个事件是@input:
在输入值改变时就会触发一次搜索,而当用户连续输入,就会不停地进行搜索,这样会造成连续调用接口,会有性能影响,影响用户体验;
之前看过防抖节流相关的一些知识点,也没用过,这次刚好稍微用一下咯
// input不再绑定事件
<el-input v-model="searchStr" >
watch: {
if(typeof str === 'string') {
if(str.trim().length !== 0) {
this.debounce(this.handleChange, 500);//500ms
}
}
//如果手动清空input里的值,也要进行相应的变化
if(str==='') {
this.handleChange(str);
}
}
methods: {
//防抖
debounce (fn,wait) {
if (this.fun!==null){
clearTimeout(this.fun)
}
this.fun = setTimeout(fn,wait)
},
handleChange(item) {
this.$emit("handleChange", item);
},
}