欢迎来到曹鸿源的个人站点

       
点击小屏 点击全屏

Vue 实现简单防抖(watch input)

在做搜索功能的时候,我们不希望input框中值一改变,就马上去请求数据,而是在指定间隔内没有输入时,才会执行函数。如果停止输入但是在指定间隔内又输入,会重新触发计时。这就是函数防抖。

因为我们可能在input框中的值还没有输完,这个时候,增加一个字符,就发送一次请求,这样太消耗程序,可能出现卡顿的情况,用户体验受到影响,甚至加大服务器的压力。

实例代码:

data: {    
    searchStr:'',
    func:null
},
watch: {
    searchStr: function (str) {
        this.debounce(this.changeStr,1000);
    }
},
methods: {
    debounce: function(fn, wait) {
        if (this.func!==null){
            clearTimeout(this.func)
        }
        this.func = setTimeout(fn,wait)
    },
    changeStr:function(){
        console.log(123)
    },
}

如上,连续输入的话,会等停止后再请求。

喜欢这个插件?点击获取:cShare

本文链接地址,转载请标注: https://caohongyuan.cn/p?id=126


上一篇:PHP 的http_build_query关于处理空格编码合理解决方法

下一篇:强大的PHP函数:str_replace()

(邮箱不会公开,只会做回复通知用) 提交 清空 {{comment.content}}
Re:{{response.content}}