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

·  阅读 85

在项目中,例如窗口的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),
}
复制代码

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改