el-input实现防抖_el-input 防抖

使用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);
     },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28