JS防抖与节流函数封装

防抖

在监听scroll事件的时候经常会用到防抖，当滚动到某一位置而触发状态，从而不会出现频繁滚动持续触发事件的情况

防抖的事件处理机制仅触发一次且必须是结束状态下才会执行

function debounce(callback, delay, immediate) {
    let timer = null;
    return function() {
        const context = this,
            args = arguments;
        timer && clearTimeout(timer);
        immediate && !timer && callback.apply(context, args); // 首次立即触发
        timer = setTimeout(function() {
            callback.apply(context, args);
        }, delay);
    }
}
window.addEventListener('scroll',
    debounce(function() {
        console.log(document.documentElement.scrollTop);
    }, 300)
);

节流

防抖有个明显的缺点就是它在事件运行的过程中不能够执行事件，比如图片的懒加载就不能够满足，当滚动了很多但是由于没有停止导致图片仍然不会加载出来

节流的事件处理机制是在一定时间内无法重复调事件

function throttle(callback, delay) { // 定时器版
    let timer = null;
    return function() {
        const context = this,
            args = arguments;
        if(!timer) {
            timer = setTimeout(function() {
                timer = null;
                callback.apply(context, args);
            }, delay);
        }
    };
}

function throttle(callback, delay) { // 时间戳版
    let start = 0;
    return function() {
        const now = Date.now();
        if(now - start > delay) {
            start = now;
            callback.apply(this, arguments);
        }
    }
}
window.addEventListener('scroll',
    throttle(function() {
        console.log(document.documentElement.scrollTop);
    }, 1000)
);