資訊專(zhuān)欄INFORMATION COLUMN
摘要：函數(shù)節(jié)流和去抖的出現(xiàn)場(chǎng)景，一般都伴隨著客戶端的事件監(jiān)聽(tīng)。函數(shù)節(jié)流的核心是，讓一個(gè)函數(shù)不要執(zhí)行得太頻繁，減少一些過(guò)快的調(diào)用來(lái)節(jié)流。
概述
也是好久沒(méi)更新 源碼解讀，看著房?jī)r(jià)蹭蹭暴漲，心里也是五味雜陳，對(duì)未來(lái)充滿恐懼和迷茫 ...（敢問(wèn)一句你們上岸了嗎）
言歸正傳，今天要介紹的是 underscore 中兩個(gè)重要的方法，函數(shù)節(jié)流和函數(shù)去抖。這篇文章不會(huì)涉及具體的代碼實(shí)現(xiàn)（關(guān)于代碼實(shí)現(xiàn)請(qǐng)期待下文），會(huì)從零開(kāi)始介紹函數(shù)節(jié)流和函數(shù)去抖的概念，辨析應(yīng)用場(chǎng)景。為什么我對(duì)這兩個(gè)方法情有獨(dú)鐘要花大篇幅去介紹？因?yàn)榫褪撬鼈儙胰肓恕竨nderscore 源碼解讀」的坑（詳見(jiàn) 一次發(fā)現(xiàn)underscore源碼bug的經(jīng)歷以及對(duì)學(xué)術(shù)界『拿來(lái)主義』的思考）。
函數(shù)節(jié)流和去抖的出現(xiàn)場(chǎng)景，一般都伴隨著客戶端 DOM 的事件監(jiān)聽(tīng)。舉個(gè)例子，實(shí)現(xiàn)一個(gè)原生的拖拽功能（不能用 H5 Drag&Drop API），需要一路監(jiān)聽(tīng) mousemove 事件，在回調(diào)中獲取元素當(dāng)前位置，然后重置 dom 的位置（樣式改變）。如果我們不加以控制，每移動(dòng)一定像素而觸發(fā)的回調(diào)數(shù)量是會(huì)非常驚人的，回調(diào)中又伴隨著 DOM 操作，繼而引發(fā)瀏覽器的重排與重繪，性能差的瀏覽器可能就會(huì)直接假死，這樣的用戶體驗(yàn)是非常糟糕的。我們需要做的是降低觸發(fā)回調(diào)的頻率，比如讓它 500ms 觸發(fā)一次，或者 200ms，甚至 100ms，這個(gè)閾值不能太大，太大了拖拽就會(huì)失真，也不能太小，太小了低版本瀏覽器可能就會(huì)假死，這樣的解決方案就是函數(shù)節(jié)流，英文名字叫「throttle」。函數(shù)節(jié)流的核心是，讓一個(gè)函數(shù)不要執(zhí)行得太頻繁，減少一些過(guò)快的調(diào)用來(lái)節(jié)流。
說(shuō)完函數(shù)節(jié)流，再看它的好基友函數(shù)去抖（debounce）。思考這樣一個(gè)場(chǎng)景，對(duì)于瀏覽器窗口，每做一次 resize 操作，發(fā)送一個(gè)請(qǐng)求，很顯然，我們需要監(jiān)聽(tīng) resize 事件，但是和 mousemove 一樣，每縮?。ɑ蛘叻糯螅┮淮螢g覽器，實(shí)際上會(huì)觸發(fā) N 多次的 resize 事件，用節(jié)流？節(jié)流只能保證定時(shí)觸發(fā)，我們一次就好，這就要用去抖。簡(jiǎn)單的說(shuō)，函數(shù)去抖就是對(duì)于一定時(shí)間段的連續(xù)的函數(shù)調(diào)用，只讓其執(zhí)行一次。
throttle 應(yīng)用場(chǎng)景函數(shù)節(jié)流有哪些應(yīng)用場(chǎng)景？哪些時(shí)候我們需要間隔一定時(shí)間觸發(fā)回調(diào)來(lái)控制函數(shù)調(diào)用頻率？
DOM 元素的拖拽功能實(shí)現(xiàn)（mousemove）
射擊游戲的 mousedown/keydown 事件（單位時(shí)間只能發(fā)射一顆子彈）
計(jì)算鼠標(biāo)移動(dòng)的距離（mousemove）
Canvas 模擬畫(huà)板功能（mousemove）
搜索聯(lián)想（keyup）
監(jiān)聽(tīng)滾動(dòng)事件判斷是否到頁(yè)面底部自動(dòng)加載更多：給 scroll 加了 debounce 后，只有用戶停止?jié)L動(dòng)后，才會(huì)判斷是否到了頁(yè)面底部；如果是 throttle 的話，只要頁(yè)面滾動(dòng)就會(huì)間隔一段時(shí)間判斷一次 https://github.com/hanzichi/u...
debounce 應(yīng)用場(chǎng)景函數(shù)去抖有哪些應(yīng)用場(chǎng)景？哪些時(shí)候?qū)τ谶B續(xù)的事件響應(yīng)我們只需要執(zhí)行一次回調(diào)？
每次 resize/scroll 觸發(fā)統(tǒng)計(jì)事件
文本輸入的驗(yàn)證（連續(xù)輸入文字后發(fā)送 AJAX 請(qǐng)求進(jìn)行驗(yàn)證，驗(yàn)證一次就好）
小結(jié)函數(shù)節(jié)流和函數(shù)去抖的核心其實(shí)就是限制某一個(gè)方法被頻繁觸發(fā)，而一個(gè)方法之所以會(huì)被頻繁觸發(fā)，大多數(shù)情況下是因?yàn)?DOM 事件的監(jiān)聽(tīng)回調(diào)，而這也是函數(shù)節(jié)流以及去抖多數(shù)情況下的應(yīng)用場(chǎng)景。至于函數(shù)節(jié)流和去抖方法的具體代碼實(shí)現(xiàn)以及調(diào)用方式，下文我們?cè)僮龇窒怼?/p>
附另外兩篇關(guān)于 underscore 函數(shù)節(jié)流以及去抖源碼剖析的文章
underscore 函數(shù)去抖的實(shí)現(xiàn)
underscore 函數(shù)節(jié)流的實(shí)現(xiàn)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87956.html
摘要：節(jié)流保證在一定時(shí)間內(nèi)，只能觸發(fā)一次。我們?cè)趪L試一下去抖消抖，消除抖動(dòng)，感覺(jué)這個(gè)更好聽(tīng)有沒(méi)有什么現(xiàn)成的上的一次發(fā)現(xiàn)源碼的經(jīng)歷以及對(duì)學(xué)術(shù)界拿來(lái)主義的思考函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場(chǎng)景辨析函數(shù)去抖的實(shí)現(xiàn) 開(kāi)篇先提幾個(gè)問(wèn)題？ 1.做搜索框的時(shí)候你使用什么事件？change?blur?keyup？你想要的效果是什么？ 2.scroll事件怎么就觸發(fā)？是滾一段距離觸發(fā)一次？還是滾一圈觸發(fā)一次？還是滾...
摘要：當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。然而，如果前一個(gè)定時(shí)器尚未執(zhí)行，其實(shí)就是將其替換為一個(gè)新的定時(shí)器，然后延遲一定時(shí)間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場(chǎng)景辨析函數(shù)節(jié)流函數(shù)防抖實(shí)現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時(shí)候都屬于用戶，有些情況下會(huì)產(chǎn)生問(wèn)題： 向后臺(tái)發(fā)送數(shù)據(jù)，用戶頻繁觸發(fā)，對(duì)服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...
摘要：當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。然而，如果前一個(gè)定時(shí)器尚未執(zhí)行，其實(shí)就是將其替換為一個(gè)新的定時(shí)器，然后延遲一定時(shí)間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場(chǎng)景辨析函數(shù)節(jié)流函數(shù)防抖實(shí)現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時(shí)候都屬于用戶，有些情況下會(huì)產(chǎn)生問(wèn)題： 向后臺(tái)發(fā)送數(shù)據(jù)，用戶頻繁觸發(fā)，對(duì)服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...
摘要：當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。然而，如果前一個(gè)定時(shí)器尚未執(zhí)行，其實(shí)就是將其替換為一個(gè)新的定時(shí)器，然后延遲一定時(shí)間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場(chǎng)景辨析函數(shù)節(jié)流函數(shù)防抖實(shí)現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時(shí)候都屬于用戶，有些情況下會(huì)產(chǎn)生問(wèn)題： 向后臺(tái)發(fā)送數(shù)據(jù)，用戶頻繁觸發(fā)，對(duì)服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...
摘要：如果本次定時(shí)器沒(méi)有被清除，時(shí)間到后就會(huì)自然執(zhí)行事件處理函數(shù)。綁定去抖后的事件回調(diào)函數(shù)綁定回調(diào)函數(shù)的屬性方法，點(diǎn)擊頁(yè)面，重置去抖效果異步請(qǐng)求清空上一次事件觸發(fā)的定時(shí)器重置為從而下一次事件觸發(fā)就能立即執(zhí)行。 一、前言 為什么會(huì)有去抖和節(jié)流這類(lèi)工具函數(shù)？ 在用戶和前端頁(yè)面的交互過(guò)程中，很多操作的觸發(fā)頻率非常高，比如鼠標(biāo)移動(dòng) mousemove 事件, 滾動(dòng)條滑動(dòng) scroll 事件, 輸...
閱讀 1448·2021-09-03 10:29
閱讀 3470·2019-08-29 16:24
閱讀 2041·2019-08-29 11:03
閱讀 1425·2019-08-26 13:52
閱讀 2938·2019-08-26 11:36
閱讀 2800·2019-08-23 17:19
閱讀 572·2019-08-23 17:14
閱讀 822·2019-08-23 13:59
