前端面試—函數防抖與函數節流
博客說明
文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗匯總，如有什么地方侵權，請聯系本人刪除，謝謝！
函數防抖（debounce）
函數防抖，就是指觸發事件后在 n 秒內函數只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函數執行時間。
簡單的說，當一個動作連續觸發，則只執行最后一次。
舉例
打個比方，坐公交，司機需要等最后一個人進入才能關門。每次進入一個人，司機就會多等待幾秒再關門。
應用場景
連續的事件，只需觸發一次回調的場景有：
- 搜索框搜索輸入。只需用戶最后一次輸入完，再發送請求
- 手機號、郵箱驗證輸入檢測
- 窗口大小Resize。只需窗口調整完成后，計算窗口大小。防止重復渲染。
簡單實現
函數防抖在執行目標方法時，會等待一段時間。當又執行相同方法時，若前一個定時任務未執行完，則 clear 掉定時任務，重新定時。
const _.debounce = (func, wait) => {
let timer;
return () => {
clearTimeout(timer);
timer = setTimeout(func, wait);
};
};
函數節流（throttle）
限制一個函數在一定時間內只能執行一次。
舉例
乘坐地鐵，過閘機時，每個人進入后3秒后門關閉，等待下一個人進入。
應用場景
間隔一段時間執行一次回調的場景有：
- 滾動加載，加載更多或滾到底部監聽
- 谷歌搜索框，搜索聯想功能
- 高頻點擊提交，表單重復提交
簡單實現
函數節流的目的，是為了限制函數一段時間內只能執行一次。因此，通過使用定時任務，延時方法執行。在延時的時間內，方法若被觸發，則直接退出方法。從而，實現函數一段時間內只執行一次。
const _.throttle = (func, wait) => {
let timer;
return () => {
if (timer) {
return;
}
timer = setTimeout(() => {
func();
timer = null;
}, wait);
};
};
感謝
