前端：性能優化之防抖與節流

前言：防抖和節流是前端應用開發中常見的兩個功能，其原理都是利用閉包，緩存延遲時間。經常使用於窗口的resize、scroll、輸入框內容校驗等操做

防抖(debounce)

在函數須要頻繁觸發時，只有當有足夠空閒的時間時，才執行一次。

好比說咱們在使用百度、360瀏覽器搜索時，每次輸入以後都有聯想詞彈出，
這個控制聯想詞的方法不多是輸入框內容一改變就觸發的，
他必定是當你結束輸入一段時間以後纔會觸發。
let timer input.on('input', () => { clearTimeout(timer) // 中止輸入 500 毫秒後開始搜索
    timer = setTimeout(() => { // 搜索
    }, 500) })

節流(thorttle)

預約一個函數只有在大於等於執行週期時才執行，週期內調用不執行。

 咱們平時在淘寶搶購某一件限量熱賣商品時，你不斷點刷新點購買，你會發現你點擊的時候總有一陣時間它沒反應，
 這裏就應用到了節流，這是由於怕點的太快致使服務器或者系統崩潰。
 1 let isClick = false
 2 button.on('click', () => {  3     if (isClick) return
 4     isClick = true
 5     // 其餘代碼。。。
 6     // 每 10 秒只容許點擊一次
 7     setTimeout(() => {  8     isClick = false
 9     }, 10000) 10 })

防抖與節流之間的區別

在發生持續觸發事件時，

防抖設置事件延遲並在空閒時間去觸發事件；

節流是利用定時器將事件隔必定的時間觸發一次。