防抖和節流

防抖（防止抖動）

以拖動為例，只要拖動就會離開原位置很多 px，不存在只拖動 1px，所以他是連續的、一次操作會執行多次的，就應該使用固定時間間隔來實現，以節省資源，這就需要用節流。

lodash 工具庫實現了防抖和節流的工具函式。

很多時候我們需要自己實現這些小的工具函式。既然有工具函式可以實現，為什麼還要自己來重複造輪子來實現呢？

想象這樣的場景：我們在開發乙個元件，這個元件依賴了 lodash ，那我們把開發好的元件發布到 npm 倉庫後，別人使用我們的倉庫就需要安裝 lodash，這個 lodash 和他原來安裝的 lodash 可能版本不一樣，導致他原來是用的版本失效，出現 bug。所以我們依賴越少越。github 中也有這樣的去除工具函式的一些方法 去除lodash

const input = document.getelementbyid("input");

input.addeventlistener("keyup", () => );

// 使用定時器實現防抖

const input = document.getelementbyid("input");
let timer = null;
input.addeventlistener("keyup", () => 
timer = settimeout(() => , 500)
});

如果 500 ms 內有了第二次操作，這時候 timer 有值（是第一次賦值的），定時器將會被清除，第一步將要被執行的邏輯停止執行。

第二次 timer 將會被重新附上值，如果 500ms 內沒有新的操作，就將執行內部邏輯。並把 timer 重置。下一次將會重新計算 timer 有沒有值，重複上面步驟。

為了不每乙個需要用到的地方都這樣寫一遍防抖邏輯，需要將其封裝為乙個方法，需要的地方直接呼叫。

// 封裝這個 debounce 函式（方法）

// 傳入的 fn 函式表示延遲一定時間後需要執行的邏輯
function debounce(fn, delay = 500) 
timer = settimeout(() => , delay)
}}input.addeventlistener(
"keyup",
debounce((e) => , 1000)
);

可拖拽元素

elem.addeventlistener("drag", (e) => );

let timer = null;

elem.addeventlistener("drag", (e) => 
timer = settimeout(() => , 400);
});

function throttle(fn, delay = 500) 

timer = settimeout(() => , delay);
};}elem.addeventlistener(
"drag",
throttle((e) => , 200)
);

防抖和節流 什麼是防抖和節流

目錄二 節流 有這樣一種情況，想象有乙個表單，點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次，又或者是惡意點選，那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖，實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候，將...

防抖和節流

在前端開發過程中，我們經常需要繫結一些持續觸發事件，如 resize scroll mousemove等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁的去執行函式。通常這種情況下，我們怎麼去解決呢？一般來講，防抖和節流是比較好的解決方案。一 函式的防抖 1 什麼是函式防抖 函式防抖 deb...

防抖和節流

防抖和節流的作用都是防止函式多次呼叫。區別在於，假設乙個使用者一直觸發這個函式，且每次觸發函式的間隔小於設定的時間，防抖的情況下只會呼叫一次，而節流的情況會每隔一定時間呼叫一次函式。1.防抖 函式防抖 debounce n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。如下例，對...