截流防抖函數

截流防抖函數經常用在頻繁按鈕操作，頁面滾動觸發，鼠標拖拽，輸入查詢等功能中。是為了在頻繁操作中為了減少性能損耗的小技巧,這兩個概念常用但是又容易混淆,下面簡單的分析下防抖與截流的異同之處

 

防抖：意味着防止抖動出現的誤操作，也就是防止像抖動一樣的頻繁操作。所以在防抖函數里會有個時間限制，當函數在一次執行之后的這個時間限制范圍內是不會再次發生的，再次觸發的話又要等一個時間限制的時間，代碼如下

// 防抖函數：調用后在一定的時間內函數不執行，過了限時執行，在限時內再次調用會重新開啟定時器
function debounce(func, delay) {
let inDebounce;
return function() {
const context = this;
const args = arguments;
clearTimeout(inDebounce); // 定時器用來執行函數
inDebounce = setTimeout(() => func.apply(context, args), delay);
};
}

 

截流：和防抖一樣，也是限制在一段時間限制內頻繁的操作。但是它和防抖不同的地方在於，它在每一個時間限制內會執行一次，代碼如下

// 截流函數：調用后在限時內執行一次，限時內再次調用，函數執行判斷條件為關閉狀態，函數不執行，函數執行后判斷條件打開
function throttle(func, limit) {
let inThrottle; // 開關
return function() {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => {
// 定時器用來進行保證在一定時間內開關的狀態
inThrottle = false;
}, limit);
}
};
}

總結：兩個函數都用了定時器，但是定時器的作用不一樣，防抖是用來執行函數，截流是用來改變下次函數執行的判斷條件，選擇用哪種，看具體應用場景而定。