關於性能優化的那點事——函數防抖

函數防抖

場景

假設網站有個搜索框, 用戶輸入文本咱們會自動聯想匹配出一些結果供用戶選擇,咱們可能首先想到的作法就是監聽keypress事件, 而後異步查詢結果. 可是若是用戶快速的輸入了一串字符, 假設是10個字符, 那麼就會在瞬間觸發10次請求, 這無疑不是咱們想要的, 咱們想要的是用戶中止輸入的時候纔去觸發查詢的請求.

原理

函數防抖就是讓某個函數在上一次執行後, 知足等待某個時間內再也不觸發此函數後再執行, 而在這個等待時間內再次觸發此函數, 等待時間會從新計算.

實現

underscore.js的函數防抖定義: _.debounce(fn, wait, [immediate]);

debounce接收三個參數:
@params fn: 須要進行函數防抖的函數;
@params wait: 須要等待的時間, 單位爲毫秒;
@params immediate: 若是爲true, 則debounce會在調用時馬上執行一次fn,
                   而不須要等到wait結束後.

_.debounce = function(fn, 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 = fn.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 = fn.apply(context, args);
            context = args = null;
        }

        return result;
    }
};

// demo:
$('#input').keypress(_.debounce(function() {
    //異步調用查詢
}, 300));