前端面試—函式防抖與函式節流
博客說明
文章所涉及的資料來自互聯網整理和個人總結，意在于個人學習和經驗匯總，如有什么地方侵權，請聯系本人洗掉，謝謝！
函式防抖（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);
};
};
感謝
淺述函式防抖和函式節流
以及勤勞的自己，個人博客，GitHub
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/106298.html
標籤：其他
下一篇：Alibaba-Dubbo介紹