vue中防抖与节流 vue项目操作

在项目中，例如窗口的scroll，输入框校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时防抖（debounce）和节流（throttle）可谓是神来之笔，不影响原始操作，也为网页提升了更快速的体验。

上代码吧 建个common.js

export function debounce(func,delays){
    let timer = null;
    return function (...args) {
        let that = this;
        if(timer !== null)  clearInterval(timer)
        timer = setTimeout(()=>{
            func.apply(that,args)
        },delays)
    }
}

export function throttle(func,delay){
    let valid = true;
    let delays = 0;
    return function () {
        if(!valid){
            //休息时间 暂不接客
            return false;
        }
        valid = false;
        setTimeout(()=>{
            this[func]();
            valid = true;
            delays = delay;
        },delays)
    }
}
复制代码

防抖

在事件被触发的n秒后执行回调，如果在这n秒内又被触发，则重新计时。

组件内引进函数，以下举一个简单的例子吧

//防抖
methods:{    isuser:debounce(function (){
    //如果用户名小于三位数
    if(this.ValidateForm.user.length<3){
        this.$notify({title:'警告',message:'用户名格式错误',type:'warning'});
        }
    },1000),
   
}
复制代码

节流

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

methouds:{
    click(){
      console.log(1)
    },
    jieliu:throttle("click",1000),
}
复制代码

注意此方法原公共节流函数。