函式節流與函式防抖

函式節流：指定時間間隔只會執行一次任務

函式防抖：任務頻繁觸發的情況下，只有任務觸發的間隔超過指定間隔的時候，任務才會執行

這裡以判斷頁面是否滾動到底部為例，普通的做法就是監聽 window 物件的 scroll 事件，然後在函式體中寫入判斷是否滾動到底部的邏輯：

$
(window).on
('scroll'
,function()
})

這樣做的缺點是比較消耗效能，因為當在滾動的時候，瀏覽器會無時無刻在計算判斷是否滾動到底部的邏輯。

在實際場景中，滾動過程中，每隔一段時間再去計算這個判斷邏輯。函式節流所做的工作就是每隔一段時間去執行一次原本需要無時無刻地在執行的函式，所以在滾動事件中引入函式節流是乙個非常好的實踐：

$
(window).on
('scroll'
,throttle
(function()
}))

加上函式節流後，當頁面再滾動的時候，每隔 300ms 才會去執行一次判斷邏輯。

簡單來說函式節流就是通過閉包儲存乙個標記（canrun = true），在函式的開頭判斷這個標記是否為 true，如果為 true 的話繼續執行這個函式，否則 return 掉，判斷完標記後立刻把這個標記設定為 false，然後把外部傳入的函式的執行包在乙個 settimeout 中，最後在 settimeout 執行完畢後再把標記設定為 true ，表示可以執行下一的迴圈了，當 settimeout 還未執行的時候， canrun 這個標記始終為 false，在開頭的判斷中被 return 掉。

function
throttle
(fn, interval =
300)
, interval)
}}

$
('input.user-name').
on('input'
,function()
,success
(data)
else},
error
(error)})
})

很明顯，這樣的做不好的地方在於當使用者輸入第乙個字元的時候，就開始請求判斷，不僅對伺服器的壓力增大，對使用者體驗也未必比以前好。理想做法應該是，當使用者輸入第乙個字元後的一段時間內如果還有字元輸入，則不去請求判斷使用者名稱是否被占用。在這裡引入函式防抖就可以完美解決問題：

$
('input.user-name').
on('input'
,debounce
(function()
,success
(data)
else},
error
(error)})
}))

防抖函式的原理就是，通過乙個閉包儲存乙個標記用來存放 settimeout 返回的值，每當使用者輸入的時候把前乙個 settimeout clear 掉，然後又建立乙個新的 settimeout，這樣就可以保證輸入字元後的 interval 間隔內如果還有字元輸入的話，就不會執行 fn 函式。

function
debounce
(fn, interval =
300)
, interval)
}}

函式節流與函式防抖的目的就是為了節約計算機資源。

函式節流與函式防抖

函式防抖與函式節流

函式節流與函式防抖

函式防抖與函式節流

函式節流與函式防抖

函式防抖與函式節流

函式節流與函式防抖

函式防抖與函式節流

相關推薦