防抖

事件觸發(fā)后延時(shí)一段時(shí)間執(zhí)行，在這期間事件又觸發(fā)，則取消之前事件執(zhí)行，繼續(xù)延時(shí)一段時(shí)間后才執(zhí)行
一般用在輸入框輸入文字驗(yàn)證，輸入完一段時(shí)間后驗(yàn)證

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

節(jié)流

事件觸發(fā)后延時(shí)一段時(shí)間執(zhí)行，在這個(gè)期間事件又觸發(fā)，會(huì)無視這些事件，只有當(dāng)一開始延時(shí)時(shí)間到后才能再次觸發(fā)
一般用在一些頻繁觸發(fā)的事件，比如resize, 在一段時(shí)間內(nèi)只執(zhí)行一次操作，防止頁面一直渲染性能低下

function throttle(fn, delay) {
    var canRun = true;
    return function() {
        if (!canRun) return;
        var that = this;
        var args = arguments;
        canRun = false;
        // 這里可以用箭頭函數(shù)就不用緩存this
        setTimeout(function(){
            fn.apply(that,args);
            canRun = true;
        }, delay);
    }
}

總結(jié)

其實(shí)基本思路都一樣，延時(shí)執(zhí)行函數(shù)，只是防抖是一段時(shí)候后執(zhí)行，有重復(fù)事件則順延，節(jié)流是在這段時(shí)間無視所有事件