話說印度研發了最新款的智能機器人，代號“七弟”，用于執行特殊任務，
由于開發者的大意疏忽，七弟的內核程式中存在一個隱晦的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/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/156525.html
標籤：JavaScript
上一篇：JS高級---遞回案例
下一篇：JS高級---淺拷貝