码迷,mamicode.com
首页 > 其他好文 > 详细

函数防抖与函数节流

时间:2018-06-09 16:43:18      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:运行   升级   ott   time   间隔   OLE   window   out   listen   

前言

有一些浏览器事件我们不希望它很频繁的触发,如调整窗口大小(onresize)、监听滚动条滚动(onscroll),如果这些监听事件需要调用接口的话一秒内可能会调用上百次,这样坑定是有问题的。

 

 

函数防抖(debounce)

如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10秒再出发(重新计时)。

function debounce(fn,wait){
    var timer = null;
    return function(){
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn()
        },wait)
    }
}

function log(){
    console.log(1)
}

window.addEventListener(‘scroll‘, debounce(log, 1000));

 

 

 

函数节流(throttle)

保证如果电梯第一个人进来后,10秒后准时运送一次,这个时间从第一个人上电梯开始计时,不等待,如果没有人,则不运行。

仔细想想,上面的防抖方式还是有一定的缺点。如果页面很长,我们一直在滚动页面,那log方法就一直不会被执行。所以我们可以升级一下上述的防抖方法。

function throttle(fn,wait,time){
    var previous = null; //记录上一次运行的时间
    var timer = null;

    return function(){
        var now = +new Date();

        if(!previous) previous = now;
        //当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话,就主动执行一次
        if(now - previous > time){
            clearTimeout(timer);
            fn();
            previous = now;// 执行函数后,马上记录当前时间
        }else{
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn();
            },wait);
        }
    }
}
function log(){
    console.log(1)
}

window.addEventListener(‘scroll‘, throttle(log, 1000, 2000));

 

函数防抖与函数节流

标签:运行   升级   ott   time   间隔   OLE   window   out   listen   

原文地址:https://www.cnblogs.com/javascriptvue/p/9159759.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!