細思極恐,於是我們需要採取一些限定手段,來減少效能消耗。也就是接下來提到的防抖和節流。
原理:第一次觸發事件時,不立即執行函式,而是給出乙個限定值,在限定值內沒有再次觸發同一事件則執行函式,如果在限定值內再次觸發,則當前計時取消,重新開始計時。
效果:如果短時間內大量觸發同一事件,只會執行一次函式。
實現:通過settimeout+閉包,settimeout用於計時,閉包用來儲存時間變數
function debounce(fn, delay) , delay)}}
原理:第一次觸發事件時,執行對應的函式,並設定時間戳,再次觸發事件時核驗兩次事件的觸發間隔是否超過限定值,沒有超過則不予執行,超過才執行
效果:如果短時間內大量觸發同一事件,那麼在函式執行一次之後,該函式在指定的時間期限內不再工作,直至過了這段時間才重新生效。
實現:時間戳+定時器
function throttle(func, delay) else}}
在節流函式內部使用開始時間prev、當前時間now和剩餘時間remain,當剩餘時間小於等於0意味著執行處理函式,這樣保證第一次就能立即執行函式並且每隔delay時間執行一次; 如果還沒到時間,就會在remaining之後觸發,保證最後一次觸發事件也能執行函式,如果在remaining時間內又觸發了該事件,那麼會取消當前的計數器並計算出新的remaing時間。
定時器版本
function throttle(fn, delay) , delay)}}
函式防抖和函式節流都是防止某一事件頻繁觸發,但是這兩兄弟之間的原理卻不一樣。 防抖是將多次執行變為只執行一次,節流是將多次執行變為每隔一段時間執行。
(1)防抖
search搜尋聯想,使用者在不斷輸入值時,用防抖來節約請求資源。
window觸發resize的時候,不斷的調整瀏覽器視窗大小會不斷的觸發這個事件,用防抖來讓其只觸發一次
登入、發簡訊等按鈕避免使用者點選太快,以致於傳送了多次請求,需要防抖
文字編輯器實時儲存,當無任何更改操作一秒後進行儲存
(2)節流
滑鼠不斷點選觸發,mousedown(單位時間內只觸發一次)
監聽滾動事件,比如是否滑到底部自動載入更多,用throttle來判斷
input輸入框,每個特定時間傳送請求或是展開下拉列表
參考:
防抖和節流 什麼是防抖和節流
目錄二 節流 有這樣一種情況,想象有乙個表單,點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次,又或者是惡意點選,那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖,實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候,將...
防抖和節流
在前端開發過程中,我們經常需要繫結一些持續觸發事件,如 resize scroll mousemove等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁的去執行函式。通常這種情況下,我們怎麼去解決呢?一般來講,防抖和節流是比較好的解決方案。一 函式的防抖 1 什麼是函式防抖 函式防抖 deb...
防抖和節流
防抖和節流的作用都是防止函式多次呼叫。區別在於,假設乙個使用者一直觸發這個函式,且每次觸發函式的間隔小於設定的時間,防抖的情況下只會呼叫一次,而節流的情況會每隔一定時間呼叫一次函式。1.防抖 函式防抖 debounce n秒內函式只會執行一次,如果n秒內高頻事件再次被觸發,則重新計算時間。如下例,對...