节流与防抖（javaScript）

最新推荐文章于 2024-08-27 13:38:21 发布

曾胖神父

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量229

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_37704442/article/details/129129275

版权

文章介绍了节流和防抖两种函数优化技术在JavaScript中的应用，主要用于处理高频事件，提高性能。节流(throttle)确保在固定时间间隔内只执行一次函数，而防抖(debounce)则是在最后一次操作后的一段延迟时间内执行函数，如果在这期间又有新的操作，则会取消之前的调用。

摘要由CSDN通过智能技术生成

节流

概念

节流：从上一次命令结束开始的一定时间范围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;
        }
    }
}