Vue 实现简单防抖(watch input)

 2019-09-12 00:03:30   {{zan}}   0   73 

在做搜索功能的时候,我们不希望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)
    },
}

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

本文链接地址:https://caohongyuan.cn/p?id=126

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