Vue中防抖和节流的使用

1.防抖。

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

思路：在计时函数前先清除之前触发的倒计时 ，比如执行了两次，在执行第二次的时候会清除第一次的倒计时 ，这样不管触发多少次都只会执行最后一次。

clearsettimeout(this.timer)
this.timer=settimeout(()=>{
//代码
},1000)

 下面是对防抖的封装，便于多次使用。

//常用场景→窗口变化、滚动条、input输入
window.onresize = (e) => {
//窗口变化
    resizeFun()
};
//因为debouce函数返回值是一个函数；所以我们需要先去用变量声明一下再执行。
var resizeFun = debouce(()=>{
//这是我们传进去要执行的函数
    consle.log(123)
},1000);

function debouce(callback,time){
    let timer;//在函数里面声明不会导致全局污染
    return function(){
        clearTimeout(timer)//老样子先清除之前的计时器
        timer = setTimeout(()=>{
                callback()//这是我们传过来的函数
              },time)
        }
};

2.节流。

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。两种方式可以实现，分别是时间戳版和定时器版。

定时器版（先等待后执行，有最后一次）

if(this.timer){
    return
}
this.timer = setTimeout(() => {
    // 代码
    timer = null
},1000 )

时间戳版（先执行后等待，无最后一次）

if(!this.time || Date.now() - this.time >= timer){//之前没有计时或者有但是没到点
     //代码
     this.time = Date.now()//获取当前时间戳
}

下面是对节流两种方式的封装 

//常用场景→窗口变化、滚动条、input输入
window.onresize = (e) => {
//窗口变化
    resizeFun()
};
//因为debouce函数返回值是一个函数；所以我们需要先去用变量声明一下再执行。
var resizeFun = debouce(()=>{
//这是我们传进去要执行的函数
    consle.log(123)
},1000);
// callback要执行的函数，time即使时间（毫秒），immediately立即触发否
function debouce(callback,time,immediately){
    
    //在函数里面声明不会导致全局污染
    if(immediately === undefined){
        //如果没有传就默认开启
        immediately = true
    }
    if(immediately){
    let t;//时间戳
    return function(){
        if(!t || Date.now() - t >= time){//之前没有计时或者有但是没到点
            callback()
            t = Date.now()//获取当前时间戳
        }
    }
    }else{
     let timer;//计时器
     return function(){
         if(timer){
             return
         }
         timer = setTimeout(()=>{
                callback()
                timer = null//清除
            },time)
        }
    } 
};