函式防抖和節流都是對高頻動作觸發回呼函式的一個優化，實作方式上有類似之處，先從使用場景做個區分，
防抖使用場景：
- 表單輸入框校驗
- 提交按鈕避免重復提交
節流使用場景：
- scroll,mousemove,resize等
函式防抖（debounce）
表單輸入框校驗在用戶不停的打字輸入時并不需要向后臺校驗文本，只有當用戶停下來一定時間后，這時候默認用戶已經輸入完畢了可以開始向后臺提交文本了，
表單的提交按鈕被用戶多次連續點擊時，顯然并不需要每次點擊都提交表單，僅在用戶不點擊之后，把最后一次的點擊操作執行即可，
防抖函式的適用場景都有一個共同特點，就是高頻觸發并不會立即高頻的執行，只有在結束高頻觸發一定時間間隔之后，執行最后一次觸發，
代碼實作就很簡單了，短時間高頻觸發則重置計時器，計時器到達指定時間后，方才執行回呼函式
var debounce = function (func, wait) {
var timer;
return function () {
var self = this, args = arguments;
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
func.apply(self, args);
}, wait);
}
}
/**
這里使用閉包是為了保存計時器，而不是定義一個全域變數來存放計時器，apply的作用則是為了處理this指向和引數的傳遞，因為setTimeout會將this指向window，
*/
函式節流（throttle）
在觸發頻率很高的場景中，通常并不需要以同樣的高頻來執行回呼函式，這時候需要人為的控制回呼函式執行頻率，以一個固定的較低頻率來執行，
實作原理是，記錄第一次觸發時間，之后每次觸發都對比是否到達指定的間隔時間，只有大于等于指定間隔才會再次執行，并重新開始記錄觸發時間，
可以用時間戳記錄并計算出時間間隔，同樣也可以用計時器來控制時間間隔，
var throttle = function (func, wait) {
var timer;
return function () {
var self = this, args = arguments;
if (!timer) {
timer = setTimeout(function () {
func.apply(self, args)
clearTimeout(timer)
timer = null;
}, wait)
}
}
}
最后用一張圖來對比防抖和節流函式的執行的頻率,可視化實作
參考檔案
函式防抖與函式節流-司徒正美
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/41409.html
標籤：JavaScript