JS优化之节流函数与防抖函数

防抖和节流本质是不一样的。

 

防抖是当高频率事件触发的时候 我们不需要知道频繁触发的过程，只需要知道最后的结果，即将多次执行变为最后一次执行。

如：

    var timer = null;
    window.onscroll = function(){
        if(timer){
            clearTimeout(timer);
        }

        timer = setTimeout(()=>{
                var t = document.documentElement.scrollTop || document.body.scrollTop;
                console.log(t);
        },300)
    }

 

节流 是将多次执行变成每隔一段时间执行。

如：

    var bStop = true;
    window.onscroll = function(){
        if(!bStop){
            return;
        }

        bStop = false;
        setTimeout(()=>{
            var t = document.documentElement.scrollTop || document.body.scrollTop;
            console.log(t);
            bStop = true;
        },300)
    }