JS函數(shù)節(jié)流防抖

ARGUS 發(fā)布于2019-08-21 17:06 / 3017人閱讀

摘要：函數(shù)節(jié)流和函數(shù)防抖就是為了解決類似需求應(yīng)運(yùn)而生的。場(chǎng)景實(shí)時(shí)搜索拖拽實(shí)現(xiàn)實(shí)現(xiàn)函數(shù)節(jié)流和函數(shù)防抖都是通過延時(shí)邏輯操作來提升性能的方法，在前端優(yōu)化中是常見且重要的解決方式。

在前端開發(fā)中有一部分的用戶行為會(huì)頻繁的觸發(fā)事件執(zhí)行，而對(duì)于DOM操作、資源加載等耗費(fèi)性能的處理，很可能導(dǎo)致界面卡頓，甚至瀏覽器的崩潰。函數(shù)節(jié)流(throttle)和函數(shù)防抖(debounce)就是為了解決類似需求應(yīng)運(yùn)而生的。

原文鏈接

函數(shù)節(jié)流(throttle)

函數(shù)節(jié)流就是預(yù)定一個(gè)函數(shù)只有在大于等于執(zhí)行周期時(shí)才執(zhí)行，周期內(nèi)調(diào)用不執(zhí)行。好像水滴攢到一定重量才會(huì)落下一樣。

場(chǎng)景：

窗口調(diào)整（resize）

頁面滾動(dòng)（scroll）

搶購瘋狂點(diǎn)擊（mousedown）

實(shí)現(xiàn)：

function throttle(method, delay){
    var last = 0;
    return function (){
        var now = +new Date();
        if(now - last > delay){
            method.apply(this,arguments);
            last = now;
        }
    }
}

document.getElementById("throttle").onclick = throttle(function(){console.log("click")},2000);

underscore實(shí)現(xiàn)：

_.throttle = function(func, wait, options) {
    var context, args, result;
    var timeout = null;
    var previous = 0;
    if (!options) options = {};
    var later = function() {
        previous = options.leading === false ? 0 : _.now();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };
    return function() {
        var now = _.now();
        if (!previous && options.leading === false) previous = now;
        //計(jì)算剩余時(shí)間
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        //剩余時(shí)間小于等于0或者剩余時(shí)間大于等待時(shí)間(本地時(shí)間變動(dòng)出現(xiàn))
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }
        return result;
    };
};

函數(shù)防抖(debounce)

函數(shù)防抖就是在函數(shù)需要頻繁觸發(fā)情況時(shí)，只有足夠空閑的時(shí)間，才執(zhí)行一次。好像公交司機(jī)會(huì)等人都上車后才出站一樣。

場(chǎng)景：

實(shí)時(shí)搜索（keyup）

拖拽（mousemove）

實(shí)現(xiàn)：

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

document.getElementById("debounce").onclick = debounce(function(){console.log("click")},2000);

underscore實(shí)現(xiàn)：

_.debounce = function(func, wait, immediate) {
    var timeout, args, context, timestamp, result;
    var later = function() {
        var last = _.now() - timestamp;
        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            if (!immediate) {
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            }
        }
    };
    return function() {
        context = this;
        args = arguments;
        timestamp = _.now();
        var callNow = immediate && !timeout;
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }
        return result;
    };
};

函數(shù)節(jié)流(throttle)和函數(shù)防抖(debounce)都是通過延時(shí)邏輯操作來提升性能的方法，在前端優(yōu)化中是常見且重要的解決方式。可以從概念和實(shí)際應(yīng)用中理解兩者的區(qū)別，在需要的時(shí)候選擇合適的方法處理。