有些瀏覽器事件可以在短時(shí)間內(nèi)快速觸發(fā)多次，比如調(diào)整窗口大小或向下滾動(dòng)頁(yè)面。例如，監(jiān)聽頁(yè)面窗口滾動(dòng)事件，并且用戶持續(xù)快速地向下滾動(dòng)頁(yè)面，那么滾動(dòng)事件可能在 3 秒內(nèi)觸發(fā)數(shù)千次，這可能會(huì)導(dǎo)致一些嚴(yán)重的性能問(wèn)題。

如果在面試中討論構(gòu)建應(yīng)用程序，出現(xiàn)滾動(dòng)、窗口大小調(diào)整或按下鍵等事件請(qǐng)務(wù)必提及 防抖(Debouncing) 和 函數(shù)節(jié)流（Throttling）來(lái)提升頁(yè)面速度和性能。這兩兄弟的本質(zhì)都是以閉包的形式存在。通過(guò)對(duì)事件對(duì)應(yīng)的回調(diào)函數(shù)進(jìn)行包裹、以自由變量的形式緩存時(shí)間信息，最后用 setTimeout 來(lái)控制事件的觸發(fā)頻率。

Throttle： 第一個(gè)人說(shuō)了算

throttle 的中心思想在于：在某段時(shí)間內(nèi)，不管你觸發(fā)了多少次回調(diào)，我都只認(rèn)第一次，并在計(jì)時(shí)結(jié)束時(shí)給予響應(yīng)。

先給大家講個(gè)小故事：現(xiàn)在有一個(gè)旅客剛下了飛機(jī)，需要用車，于是打電話叫了該機(jī)場(chǎng)唯一的一輛機(jī)場(chǎng)大巴來(lái)接。司機(jī)開到機(jī)場(chǎng)，心想來(lái)都來(lái)了，多接幾個(gè)人一起走吧，這樣這趟才跑得值——我等個(gè)十分鐘看看。于是司機(jī)一邊打開了計(jì)時(shí)器，一邊招呼后面的客人陸陸續(xù)續(xù)上車。在這十分鐘內(nèi)，后面下飛機(jī)的乘客都只能乘這一輛大巴，十分鐘過(guò)去后，不管后面還有多少?zèng)]擠上車的乘客，這班車都必須發(fā)走。

在這個(gè)故事里，“司機(jī)” 就是我們的節(jié)流閥，他控制發(fā)車的時(shí)機(jī)；“乘客”就是因?yàn)槲覀冾l繁操作事件而不斷涌入的回調(diào)任務(wù)，它需要接受“司機(jī)”的安排；而“計(jì)時(shí)器”，就是我們上文提到的以自由變量形式存在的時(shí)間信息，它是“司機(jī)”決定發(fā)車的依據(jù)；最后“發(fā)車”這個(gè)動(dòng)作，就對(duì)應(yīng)到回調(diào)函數(shù)的執(zhí)行。

總結(jié)下來(lái)，所謂的“節(jié)流”，是通過(guò)在一段時(shí)間內(nèi)無(wú)視后來(lái)產(chǎn)生的回調(diào)請(qǐng)求來(lái)實(shí)現(xiàn)的。只要一位客人叫了車，司機(jī)就會(huì)為他開啟計(jì)時(shí)器，一定的時(shí)間內(nèi)，后面需要乘車的客人都得排隊(duì)上這一輛車，誰(shuí)也無(wú)法叫到