JavaScript之debounce(防抖)和throttle(节流)

debounce防抖

    function debounce(fn,delay){
        var timer;
        return function(){
            var that = this;
            var args = arguments;
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                timer=null;
                fn.apply(that,args);
            }, delay);
        };
    }

    // Test
    document.onclick = debounce(function() {
        console.log('hahahaahaha');
    }, 1000);

throttle节流

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


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



//加强计时器+时间戳,优先执行一次,在时间段内会执行两次
function throttle(fn, delay) {
    var timer = null;
    var beiginTime = Date.now();
    return function() {
        var curTime = Date.now();
        var hold = delay - (curTime - beiginTime);
        var context = this;
        var args = arguments;
        clearTimeout(timer);
        if (hold <= 0) {
            fn.apply(context, args);
            beiginTime = Date.now();
        } else {
            timer = setTimeout(fn, hold);
        }
    }
}


//Test
window.onscroll = throttle(function () {
    console.log(document.body.scrollTop || document.documentElement.scrollTop);
},1000);