节流与防抖（javaScript）

Posted 2023-03-05 曾胖神父

节流

概念

节流：从上一次命令结束开始的一定时间范围t内，如果多次连续下达命令，则只执行当前时间段t内第一次命令

Demo

//防抖，debounce:如果下达命令后，在t毫秒内再次下达该命令，则取消刚刚下达的命令，只执行
//形参1为命令对应的函数,形参2为时间间隔
function debounce(fn,wait)
    //每次执行函数，生成一个定时器
    let timer=null;
    return function()
        //判断定时器是否为空，如果不为空
        if(timer)
        //如果定时器不为空，则清除定时器即取消刚刚下达的命令
        clearTimeout(timer);
        //使用apply赋予新命令
        timer=setTimeout(()=>fn.apply(this,arguments),wait);
    
;

防抖

概念

防抖，debounce：如果下达命令后，在t毫秒内再次下达该命名，则取消刚刚下达的命名，只执行新命令

Demo

//节流,从上一次命名结束开始的一定时间范围内，如果多次连续下达命令，则只执行当前时间段t内第一次命令
//形参1为命令对应的函数,形参2为时间间隔
function throttle(fn,gapTime)
    //声明lastTime变量，命令最后执行时间
    let lastTime=null;
    //声明nowTime变量，存储当前时间
    let nowTime=null;
    return function()
        //更新nowTime为当前时间
        nowTime=Date.now();
        //判断命令最后执行时间与当前时间的时间间隔差，如果间隔差不在时间范围内，则执行新命令，否则执行时间段t内第一次命令
        if(!lastTime||nowTime-lastTime>gapTime)
            fn();
            //更新lastTime变量，命令最后执行时间
            lastTime=nowTime;