防抖和節流

防抖和節流都是為了防止事件觸發頻率過高，從而引起效能問題。

防抖和節流的區別

防抖：讓某個函式或事件在某個時間後觸發。比如我們常用的搜尋功能，在輸入某個值時是不會觸發搜尋事件，當我們停頓幾秒就觸發了搜尋，也就說明事件是滿足了某個時間後才觸發的，沒有滿足就不觸發。

節流：讓某個函式或事件在間隔多久時間觸發。比如我們常用的onscroll滑鼠滾動事件。假設這樣乙個場景，當我們的滑鼠滾動大於某個值時頂部導航欄變為固定定位，為了實現這個效果，我們首先想到的是監聽 onscroll滑鼠滾動事件，監聽它問就來了， onscroll滾動觸發的頻率超級高，所以這就要用到我們的節流方法。

防抖實現**

//事件處理函式

function handle(arg)
//防抖
function debounce(fn, delay), delay)
}}//事件繫結
var input = document.getelementbyid("input"); 
input.onkeydown = debounce(function(), 500)

let isallow = true;

function shake() , 1000);
};fun();
}let intertimer = setinterval(() => , 0);

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

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

防抖和節流

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

防抖和節流

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