js防抖与节流

 

防抖

多次频繁触发，当一段时间内不在触发，才会执行一催（适用场景：如实时搜索，滚动加载）

原理：每次触发，将函数放入定时器中待执行。间隔时间不足再次调用时，清除计时器，重新把函数放入定时器。直到间隔时间内无触发，执行定时器内的函数。demo如下：

function debounce(fn, interval) {
    var timer;
    var gapTime = interval || 300;//间隔时间，如果interval不传，则默认300ms
    return function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.call(this);
        }, gapTime);
    };
}

window.addEventListener('scroll', debounce(fn, 1000)); //绑定滚动事件

 

节流

多次频繁触发，固定的时间范围内，只执行一次（适用场景：如秒杀，抢票时用户狂点）

原理：每次触发，计算上次触发时间与当前时间差值，大于等于设定时间段时，执行一次，同时更新上次触发时间

function throttle(func, delay) {
    var prev = Date.now();
    return function() {
        var context = this;
        var args = arguments;
        var now = Date.now();
        if (now - prev >= delay) {
            func.apply(context, args);
            prev = Date.now();
        }
    }
}

window.addEventListener('scroll', throttle(fn, 1000));