el-input实现防抖

浅浅的花香味﹌ 2022-12-15 02:20 443阅读 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 条评论，443人围观）

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

相关阅读

相关 js实现防抖

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

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

相关 vue防抖功能如何实现

Vue 防抖功能可以通过设置一个计时器来实现。具体来说，防抖功能可以用于限制事件(如键盘输入、窗口调整大小、滚动等)在一定时间内只能触发一次。具体实现方法如下： 1.

爱被打了一巴掌/ 2024年03月25日 18:57/ 0 赞/ 78 阅读

相关 lodash实现节流防抖

lodash 有多年开发经验的开发人员，往往都会有自己常用的的一套工具库，称为 utils、helpers 等等，这套库一方面是自己的技术积累，另一方面也是对某项技术的扩展，

不念不忘少年蓝@/ 2023年06月25日 08:20/ 0 赞/ 14 阅读

相关防抖和节流实现原理

防抖或是节流：限制函数的执行次数 1. 防抖：通过 `settimeout`的方式，在一定的时间间隔内，将多次触发变成一次触发 <!DOCTYPE html>

╰+哭是因爲堅強的太久メ/ 2022年12月29日 06:19/ 0 赞/ 176 阅读

相关 el-input实现防抖

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

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

相关防抖和节流实现

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

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

相关 JS防抖

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

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

相关 JS 防抖

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

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

相关防抖的实现

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

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

相关函数节流与防抖实现

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

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