函數(shù)節(jié)流是什么?

在事件處理機制中可能會出現(xiàn)在極短的時間內(nèi)多次執(zhí)行事件處理函數(shù)，比如監(jiān)聽了鍵盤敲擊事件，下面以一個具體需求來舉例說明：當用戶在文本框輸入關鍵字時，自動查詢匹配的關鍵字并將結(jié)果返回給用戶。我們可以通過綁定文本框的鍵盤事件來監(jiān)聽輸入框內(nèi)容變化，一旦變化就向后臺查詢匹配關鍵字并返回以展示。假設我想查詢“blackberry”，它包含10個字符，也許輸入完成只花了1秒鐘左右，那么在這1秒內(nèi)就會調(diào)用10次查詢方法。這是一件非?？植赖氖虑椋绻詫毜乃阉骺蛞策@樣實現(xiàn)，那就不禁讓人擔心它會不會在光棍節(jié)到來的幾分鐘之內(nèi)就掛掉了（當然，它也許并沒有這么脆弱，但這絕對不是最好的方案）

更好的方法是，我們希望用戶已經(jīng)輸入完成，或者正在等待提示（也許他懶得再輸入后面的內(nèi)容）的時候，再查詢匹配關鍵字。

最后我們發(fā)現(xiàn)，在我們期望的這兩種情況下，用戶會暫時停止輸入，于是我們決定在用戶暫停輸入200毫秒后再進行查詢（如果用戶在不斷地輸入內(nèi)容，那么我們認為他可能很明確自己想要的關鍵字，所以等一等再提示他）

這時，利用debounce函數(shù)，我們可以輕松實現(xiàn)這個需求。
<pre>
Function.prototype.debounce = function (delay) {
var timestamp, timeout, result, context, caller = this, args
var later = function () {
var last = new Date() - timestamp
if (last < delay && last >= 0) {
timeout = setTimeout(later, delay - last)
} else {
timeout = null
result = caller.apply(context, args)
}
}

return function() {
args = arguments
context = this
timestamp = new Date()
if (!timeout) timeout = setTimeout(later, delay)
return result
}
}
//用法

var print = function (str) { console.log(str) }.debounce(2000)
document.body.addEventListener('click', function (e) { print('clicked!') })
</pre>