防抖節流的含義使用場景及js實現原理
阿新 • • 發佈：2021-09-28
1.防抖：n 秒後在執行該事件，若在 n 秒內被重複觸發，則重新計時。程式碼實現重在清零 clearTimeout。
應用：登入，提交，瀏覽器視窗的resizes事件，文字編輯儲存
<script>2.節流：n 秒內只執行一次，若在 n 秒內重複觸發，只有一次生效，響應平滑。 應用：scroll 事件，input的實時搜尋
//防抖函式 function debounce (f, wait) {
//設定一個定時器 let timer; return (...args) => {
//單位時間內再次點選將把未來的發生的點選事件扼殺在搖籃之中，並重新計時，類似中斷回城 clearTimeout(timer) timer = setTimeout(() => { f(...args) }, wait) } } let count= 0; let divEl = document.getElementById("submitBtn");
//真正執行的請求時間 function moveFn(){ console.log('ajax請求:'+count++) } //divEl.addEventListener("click", moveFn,false) divEl.addEventListener("click", debounce(moveFn, 3000)); </script>
function throttle(func, wait) {
// 記錄上一次執行 func 的時間
let prev = 0
return function (...args) {
// 當前觸發的時間（時間戳）
const now = Number(new Date())
// 只有噹噹前時間超過上次點選單位時長後才去執行方法func，類似在公交車站等公交
if (now >= prev + wait) {
// 符合條件執行 func 時，需要更新 prev 時間
prev = now
func.apply(this, args)
}
}
}
divEl.addEventListener("click", throttle(moveFn, 1000));
3.通俗易懂的接地氣的防止重複點選的寫法：
let canCLick = true
divEl.addEventListener("click",()=>{
if(canCLick){
canCLick = false
console.log('提交')
setTimeout(function(){
canCLick = true
},1000)
}
});