關注前端體驗或效能優化的應該有聽說過防抖，節流。那麼，什麼是防抖節流呢？
概念在短時間內多次觸發同乙個函式，只執行最後一次。
舉例：搭乘公交車的時候，陸續有不同的乘客上車，但師傅只會在最後乙個乘客上車後才關門。
效果演示
防抖前防抖後
應用場景
實現簡單版本
function debounce(fn, wait = 1000) , wait);
};}
debounce函式的實現原理就是通過計時器延遲函式執行，短時間內再次觸發時重置並新增新計時器。此時的輸出函式還有個缺陷，就是this指向global，我們需要讓它指向原本指向的變數。
function debounce(fn, wait = 1000) , wait);
};}
function debounce(fn, wait = 1000, immediate = false) , wait);
return;
}// 新計時器
timer = settimeout(() => , wait);
};}
function debounce(fn, wait = 1000, immediate = false) , wait);
return;
}// 新計時器
timer = settimeout(() => , wait);
} debounced.cancel = () => ;
return debounced;
}
debounce函式就完成了。
概念多次觸發同乙個函式，同一段時間內只執行一次。
舉例：獲取驗證碼很多都會限制 60s 的時間，在 60s 內再次獲取驗證碼是無效，只能獲取一次。下個60s才能再次獲取。
效果演示
節流前節流後
應用場景
實現簡單版本
function throttle(fn, wait = 1000)
};return throttled;
}
function throttle(fn, wait, options = ) = options;
const throttled = function (...args) else if (trailing) , wait);}};
return throttled;
}
function throttle(fn, wait, options = ) = options;
const throttled = function (...args) else if (trailing) , wait);}}
throttled.cancel = () =>
return throttled;
}
防抖和節流是兩個在工作中很可能會遇到的問題，弄清楚其作用和原理對技能提公升和面試都會有幫助。
參考歡迎到前端學習打卡群一起學習～516913974
手寫防抖throttle和節流debounce
手寫節流throttle 節流和防抖的區別 若頁面中有乙個輸入框，我想根據輸入框的內容變化實時做出變化。那我該怎麼做呢？那麼從效能優化的角度要怎麼做呢？當使用者輸入結束或者暫停時，才會觸發 change 事件 這就是防抖了 text id input1 const input1 document.g...
防抖與節流方案 函式防抖和節流
在前端開發的過程中，我們經常會需要繫結一些持續觸發的事件，如 resize scroll mousemove 等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢？一般來講，防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...
防抖和節流 什麼是防抖和節流
目錄二 節流 有這樣一種情況，想象有乙個表單，點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次，又或者是惡意點選，那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖，實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候，將...