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

■知識點

    函數(shù)節(jié)流就是降低函數(shù)被調(diào)用的頻率，主要是針對DOM事件暴露出的問題，提出的一種解決方案。例如，使用 resize、mousemove、mouseover、mouseout、keydown、keyup 等事件都會頻繁地觸發(fā)事件。如果這些事件的處理函數(shù)中包含大量的耗時操作，如Ajax諧求、數(shù)據(jù)庫查詢、DOM遍歷等，如此高頻的耗時操作可能會讓瀏覽器崩潰，嚴重影響用戶體驗。

    例如，在大型網(wǎng)店平臺的導(dǎo)航欄中，為了解決mouseover和mouseout移動過快時給瀏覽器處理帶來 的負擔，特別是減輕涉及Ajax調(diào)用給服務(wù)器造成的極大負擔，都會進行函數(shù)節(jié)流處理。

■實例設(shè)計

設(shè)計思想：讓代碼在間斷的情況下重復(fù)執(zhí)行。實現(xiàn)方法：使用定時器對函數(shù)進行節(jié)流。

【實現(xiàn)代碼】

//函數(shù)節(jié)流封裝代碼，參數(shù)method表示要執(zhí)行的函數(shù)，delay表示要延遲時間，單位是毫秒

function throttle(method, delay) {

    var timer=null;                       //定時器句柄

    return function(){                    //返回節(jié)流函數(shù)

        var context=this, args=arguments; //上下文環(huán)境和參數(shù)對象

        clearTimeout(timer);              //先浩理未執(zhí)行的函數(shù)

        timer=setTimeout(function() {     //重新定義定時器，記錄新的定時器句柄

            method.apply(context,args);   //執(zhí)行預(yù)設(shè)的函數(shù)

        },delay);

    }

}

【應(yīng)用代碼】

設(shè)計文本框的keyup事件和窗口的resize事件，在瀏覽器中拖動窗口，或者在文本框中輸入字符，然后在控制臺查看事件響應(yīng)次數(shù)和速度。

<input id="search" type="text" name="search">

<script>

function queryData(text){ console.log("搜索："+ text);} 

var input = document.getElementByld("search");

input.addEventListener("keyup", function(event){queryData(this.value);}); 

var n=0;                 //記錄響應(yīng)次數(shù)

function f () {console.log("響應(yīng)次數(shù)："+ ++n) ; }

window.onresize=f;

</script>

    通過觀察可以發(fā)現(xiàn)，在拖動改變窗口的一瞬間，resize事件響應(yīng)了幾十次。如果在文本框中輸入字符，keyup事件會立即響應(yīng)，等不及用戶輸入完一個單詞。

    現(xiàn)在，使用throttleO封裝函數(shù)把上面的事件處理函數(shù)轉(zhuǎn)換為節(jié)流函數(shù)，同時設(shè)置延遲時間為500毫秒。

input.addEventListener("keyup", function(event){ 

    throttle(queryData, 500)(this.value);

});

window.onresize=throttle(f, 500);

    最后再重新測試，會發(fā)現(xiàn)拖動一次窗口改變大小，僅響應(yīng)一次，而在文本框中輸入字符時，也不會立即響應(yīng)，等了半秒鐘后，才顯示輸入的字符。提示，完整示例請參考本節(jié)示例源碼。