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

• 函數(shù)防抖（debounce）：當(dāng)持續(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實(shí)現(xiàn)的自適應(yīng)不再此范圍內(nèi)）
    • 通過監(jiān)聽 keyup 事件，監(jiān)聽文字輸入并調(diào)用接口進(jìn)行模糊匹配
    • ......
• 函數(shù)節(jié)流（throttle）：當(dāng)持續(xù)觸發(fā)事件時倔喂，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)铝条。
  • 在來個不由得想起了一個場景靖苇，說這話的時候多少有點(diǎn)尷尬。
    • 搶購的時候班缰。
    • ......
  • 畫外音：任何脫離了業(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ù)，是不是達(dá)到防抖的目的呢运吓。
             timer = setTimeout(function () {
                 fn.apply(this, arguments)
             }, dealy)
         }
     }
    // 功能實(shí)現(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
             }
         }
     }
     //功能實(shí)現(xiàn),不好意思隘庄，300ms這個時間之內(nèi)，點(diǎn)擊我多少次癣亚，我就給你處理一次丑掺，sorry
     button.click = throttle(fn,300)