JS 防抖 节流

一、防抖

对于短时间内连续触发的事件，防抖的含义就是在某个时间期限内，事件处理函数只执行一次，避免事件执行频率过高导致的性能浪费。 实现：借助setTimeout这个函数，通过一个变量来保存计时，在设置的时间结束后执行后续操作。

function preShake(fn,delay){
    let timer = null; // 借助闭包，避免timer被回收
    return function() {
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,delay);
    }
}

function getScrollPosition() {
    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
}

// window.onscroll = preShake(getScrollPosition,1000); // body的高度设为100%时，window.onscroll不响应，换成事件监听
document.body.addEventListener('scroll',preShake(getScrollPosition,1000));

此时会发现，必须在停止滚动1秒以后，才会打印出滚动条位置。

二、节流

对于短时间内大量触发同一事件，在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

function throttle(fn,delay){
    let valid = true;
    return function() {
        if (!valid) {
            return;
        }
        valid = false;
        setTimeout(() => {
            fn();
            valid = true;
        }, delay)
    }
}

function getScrollPosition() {
    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
}
document.body.addEventListener('scroll',throttle(getScrollPosition,1000));

此时会发现，如果一直滚动滚动条，会以1s的时间间隔打印出滚动条位置。