el-input实现防抖

浅浅的花香味﹌ 2022-12-15 02:20 415阅读 0赞

使用`element-ui`的`input`时，需求是输入值有变化时就进行事件绑定。  
有一个事件是@input：  
![在这里插入图片描述][20201014165037907.png_pic_center]在输入值改变时就会触发一次搜索，而当用户连续输入，就会不停地进行搜索，这样会造成连续调用接口，会有性能影响，影响用户体验；

之前看过防抖节流相关的一些知识点，也没用过，这次刚好稍微用一下咯

// 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);
         },
    }

[20201014165037907.png_pic_center]: /images/20221123/c9469553e6dd43e0a1c5f04fb510f007.png

发表评论取消回复

表情：

评论列表（有 0 条评论，415人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现防抖

防抖的目的是在一段时间内，只执行一次函数。下面是一个使用 JavaScript 实现防抖的示例： function debounce(fn, delay) {

ゝ一纸荒年。/ 2024年03月27日 12:53/ 0 赞/ 68 阅读

相关防抖函数

防抖函数是指在某一段时间内，如果接收到多次触发事件的请求，只会执行一次，而不是每次都执行。这个函数通常用于用户的输入事件，比如用户在输入框中输入文本时，如果每次输入都进行请求或

你的名字/ 2024年03月25日 19:46/ 0 赞/ 83 阅读

相关 el-input实现防抖

使用`element-ui`的`input`时，需求是输入值有变化时就进行事件绑定。有一个事件是@input： ![在这里插入图片描述][20201014165037

浅浅的花香味﹌/ 2022年12月15日 02:20/ 0 赞/ 416 阅读

相关节流防抖

/ fn [function] 需要防抖的函数 delay [number] 毫秒，防抖期限值 / function debounce(fn,delay){

今天药忘吃喽~/ 2022年11月04日 12:24/ 0 赞/ 223 阅读

相关函数防抖

概念函数防抖（debounce）当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间函数节流（throttle）预先设定一个执行周

- 日理万妓/ 2022年10月01日 08:46/ 0 赞/ 196 阅读

相关防抖和节流实现

防抖 1. 在事件被触发后 n 秒再执行回调，如果在这 n 秒内又被触发，则重新计时 2. 实现 / 防抖在事件被触发后 n 秒再执行回调，如果在这

客官°小女子只卖身不卖艺/ 2022年09月08日 14:51/ 0 赞/ 191 阅读

相关 JS防抖

在前端开发的过程中，有时候我们需要对一些事件进行相应，但是，有时候，这些事件可能会十分频繁的触发。比如： 1、window 的 resize、scroll 2

梦里梦外;/ 2022年06月13日 04:16/ 0 赞/ 225 阅读

相关 JS 防抖

没有防抖： var count = 1; var container = document.getElementById('container');

àì夳堔傛蜴生んèń/ 2022年06月06日 02:14/ 0 赞/ 230 阅读

相关防抖的实现

> 函数防抖就是在函数频繁触发情况时，只有足够空闲的时间，才执行一次。 > 场景： > 实时搜索（keyup） > 拖拽（mousemove）上代码：

左手的ㄟ右手/ 2022年04月08日 15:38/ 0 赞/ 180 阅读

相关函数节流与防抖实现

问题引出：什么是函数节流？什么是函数防抖？ 1. 函数节流函数节流：一个函数执行一次后，只有大于设定的时间周期才会执行第二次。函数节流限制一个函数在一定时间内

不念不忘少年蓝@/ 2021年11月10日 20:22/ 0 赞/ 369 阅读