stay hungry stay foolish

js防抖与节流

防抖函数

主要要来防止频繁调用某一事件的回调,其规定在某一延迟内,如果继续有事件触发,则计时器重新开始计时

    var debounce = function(cb,delay) {
        var timer = null;
        return function() {
            clearTimeout(timer);
            timer = setTimeout(function() {
                cb();
            },delay);
        }
    }
    var foo = function() {
        console.log('scroll');
    }
    document.querySelector('.wrap').addEventListener('scroll', debounce(foo, 2000));

节流函数

节流函数类似防抖函数,也是用来解决事件的频繁触发,不过其能保证在事件发生后,在规定延迟后至少会执行一次

    var throttle = function(cb, delay) {
        var timer = null;
        return function() {
            if(!timer) {
                timer = setTimeout(function() {
                    cb();
                    timer = null;
                },delay);
            }
        }
    }
    document.querySelector('.wrap').addEventListener('scroll', throttle(foo, 2000));