防抖:所謂防抖,就是指觸發事件後在 n 秒內函式只能執行一次,如果在 n 秒內又觸發了事件,則會重新計算函式執行時間。
節流:所謂節流,就是指連續觸發事件但是在 n 秒中只執行一次函式。
兩種方式可以實現,分別是時間戳版和定時器版。
//節流
// 思路:在規定時間內只觸發一次
function
throttle
(fn, delay)}}
functionfn(
)addeventlistener
('scroll'
,throttle
(fn,
1000
))
//防抖
// 思路:在規定時間內未觸發第二次,則執行
function
debounce
(fn, delay)
, delay)}}
functionfn(
)addeventlistener
('scroll'
,debounce
(fn,
1000
))
防抖與節流方案 函式防抖和節流
在前端開發的過程中,我們經常會需要繫結一些持續觸發的事件,如 resize scroll mousemove 等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢?一般來講,防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...
防抖和節流 什麼是防抖和節流
目錄二 節流 有這樣一種情況,想象有乙個表單,點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次,又或者是惡意點選,那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖,實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候,將...
節流與防抖
瀏覽器中某些計算和處理要比其他的昂貴,例如在瀏覽器中操作dom比非dom互動需要更多的記憶體和cpu的事件,連續嘗試進行過多的dom相關操作可能ui導致瀏覽器掛起,有時甚至會崩潰。尤其在ie中使用onresize事件處理程式的時候容易發生,當調整瀏覽器大小的時候,該事件會連續觸發。在onresize...