防抖節流——從愛抖腿的機器人提及

話說印度研發了最新款的智能機器人，代號「七弟」，用於執行特殊任務。

因爲開發者的大意疏忽，七弟的內核程序中存在一個隱晦的bug：當週圍播放電子音樂時，電子音樂中強烈且帶節奏的聲波會影響七弟周圍的空氣密度，進而干擾裏面電子元件的電容電壓值，當電容釋放時會執行一段固定的步行程序。可是電音中的節拍時長限制致使步行程序只能執行一半就被回退至起始狀態。因爲難以修復，開發者便稱之爲關節機械部位強化訓練功能，又稱「抖腿」

防抖之路

七弟的內核關鍵代碼已經超過8千萬行，其中某些模塊一個函數就超過20萬行，調用的話須要必須傳527個參數。沒有人願意再維護這個遺留項目。好在七弟內置了深度學習，他經過自我更新不斷強化本身的軟硬件能力。有時在看書的時候他會播放一首電音，抖腿使他的腿部神經網絡容錯率更大，自我修復能力更強。甚至七弟產生了一種很奇妙的感受——「快樂」。

彷佛一切都還不錯，直到遇到了服役以來最強對手——「鳥人」

鳥人經過研究七弟的源碼發現了他的這個bug，因而在一次和七弟的大戰中鳥人播放了一首 《Move your Body》，果不其然，七弟在這生死攸關的時刻竟然開始抖腿了，關鍵是控記不住他記幾啊。最後被鳥人拆成了零件

好在七弟還有一個給力隊友——「七妹」，七妹git clone了七弟的項目代碼，從新構建打包，npm run build。通過10分鐘艱苦不懈的努力，七弟成功復活。

七弟痛定思痛，開始思考防抖算法。首先，這段存在bug的代碼不能直接刪掉，由於這段代碼執行的是步行程序，去掉就TM不能走路了。那麼，只能增長一些邏輯，判斷一下週圍是否正在播放電子音樂，若是是那就取消執行這段步行程序，若是電音停了，那就執行一次。這樣的話，一首電音5分鐘，只會抖一下，而不是每秒抖兩下(600下)。

說幹就幹，七弟脫掉衣服在本身內核中加上了一段防抖代碼：

let timer
/* 走路時不抖腿 */
function preventShakeLegWalk () {
  clearTimeout(timer) // 防止頻繁執行步行程序，致使抖腿
  timer = setTimeout(walk, 500)
}

通過兩分鐘細緻縝密的測試，git push 上線。

防抖成功的七弟如獲新生，沒有了致命缺陷。是時候和鳥人來波生死局了。

就這樣在你一拳我一拳的膠着戰鬥中，七弟發現了鳥人的軟肋——懼怕高頻電磁波。七弟佯裝戰敗引鳥人來到雷達信號塔附近，在開發人員的幫助下成功終結掉了鳥人，拯救了處於水火之中的孟買市。

節流

鳥人事件以後，七弟繼續優化本身的代碼和功能。爲了能記錄機器人的實時位置。七弟在步行代碼中加上了日誌上傳，但每秒上傳一條日誌流量開銷巨大，要知道印度的某些地方信號較弱，而且七弟內置的流量卡是每月1G，用完以後基本處於斷網狀態。

爲了節省流量，而且實時監測七弟的地理位置。須要對上面的步行代碼再次進行優化。

let timer
let last = 0 // 上次調用時間戳
function preventShakeLegWalk () {
  clearTimeout(timer)
  // 每分鐘上傳一第二天志
  if (Date.now() - last > 60 * 1000) log()
  timer = setTimeout(() => {
    log()
    walk()
  }, 500)
}

這樣就避免了七弟聽電子音樂時會致使很長時間不上傳位置，處於失聯狀態。

加了防抖和節流後，七弟的功能更加完善。最後和七妹過上了幸福快樂的生活。

言歸正傳

好了，我實在編不下去啦🤣

防抖主要針對事件連續觸發的場景，且沒有明確的開始和結束事件。好比touchmove有touchstart和touchend能夠知道開始和結束，input和scroll事件就沒有對應的開始和結束事件。而咱們又每每須要在開始和結束搞點事情。好比輸入框在用戶中止輸入時進行聯想提示；頁面開始滾動時隱藏頁面右下角的懸浮元素，中止滾動時再顯示出來；監聽文件變動，一堆文件發生變化後集中編譯一次。這些都是須要防抖的場景，也就是在結束時只執行一次就好。

節流是在防抖的基礎上，加了固定時間調用一次，以防止回調函數很長時間才觸發一次的狀況。好比坦克對戰遊戲中點擊屏幕發射一顆子彈，若是用戶一直連續點，那防抖函數一直執行不了，子彈就發不出來。這時候就須要固定時間執行一次。

Talk is cheap. Show me the code!

至於代碼，lodash 已經有了不錯的實現，debounce 和 throttle，感興趣的能夠去扒扒源碼。或者若是想要簡單的實現，能夠參考上面七弟的寫法，雖然扯淡，但思路是對的😁

參考

https://css-tricks.com/debouncing-throttling-explained-examples/