話說印度研發了最新款的智能機器人，代號“七弟”，用於執行特殊任務。
由於開發者的大意疏忽，七弟的內核程序中存在一個隱晦的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/