• 小哥哥：不由得想起了，防抖和節(jié)流。
• 面試官：能不能手撕一下。
• 老規(guī)矩，先了解概念，在分析分析需求，切記永遠不要著急寫代碼。

• 函數(shù)防抖（debounce）：當持續(xù)觸發(fā)事件時，一定時間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會執(zhí)行一次，如果設(shè)定的時間到來之前，又一次觸發(fā)了事件，就重新開始延時。
  • 不有的想起了一個場景，
    • 輸入框內(nèi)容校驗 ，類似百度聯(lián)想詞
    • 通過監(jiān)聽 scroll 事件，檢測滾動位置，根據(jù)滾動位置顯示返回頂部按鈕
    • 通過監(jiān)聽 resize 事件，對某些自適應(yīng)頁面調(diào)整DOM的渲染（通過CSS實現(xiàn)的自適應(yīng)不再此范圍內(nèi)）
    • 通過監(jiān)聽 keyup 事件，監(jiān)聽文字輸入并調(diào)用接口進行模糊匹配
    • ......
• 函數(shù)節(jié)流（throttle）：當持續(xù)觸發(fā)事件時，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)。
  • 在來個不由得想起了一個場景，說這話的時候多少有點尷尬。
    • 搶購的時候。
    • ......
  • 畫外音：任何脫離了業(yè)務(wù)場景的技術(shù)都是耍流氓，防抖也好，節(jié)流也罷，適合他的業(yè)務(wù)場景才是最好的。

• 防抖：我們應(yīng)該封裝一個函數(shù)，這個函數(shù)需要哪些參數(shù)，看上邊概念的兩個關(guān)鍵字：一定時間(delay)，處理函數(shù)(fn)。
• 開撕：

     function debounce(fn, dealy) {
         let timer = null
         return function () {
             //上來的給他清理掉哦，感興趣的同學(xué)可以去研究下setTimeout(),和 
             // clearTimeout
             clearTimeout(timer)
             //在這個時間內(nèi)我只調(diào)用一次事件處理函數(shù)，是不是達到防抖的目的呢。
             timer = setTimeout(function () {
                 fn.apply(this, arguments)
             }, dealy)
         }
     }
    // 功能實現(xiàn)，800ms之內(nèi)，你觸發(fā)多少次我只執(zhí)行一次，就是這么任性
    input.oninput = debounce(fn,800)  

• 節(jié)流：我們還是應(yīng)該封裝一個函數(shù)，需要參數(shù)，事件處理函數(shù)（fn），一定時間(wait)

     function throttle(fn, wait) {
         //定義一個事件為0，第一次肯定會執(zhí)行
         let lastTime = 0
         return function () {
             //拿到從1970年到現(xiàn)在的時間戳
             let nowTime = new Date.getTime()
             //在這個時間內(nèi)我才觸發(fā)事件處理函數(shù)，是不是起到節(jié)流的目的呢。
             if (nowTime - lastTime > wait) {
                 fn.apply(this, arguments)
                 lastTime = nowTime
             }
         }
     }
     //功能實現(xiàn),不好意思，300ms這個時間之內(nèi)，點擊我多少次，我就給你處理一次，sorry
     button.click = throttle(fn,300)