防抖和節流

2021-10-09 04:43:36 字數 673 閱讀 4660

函式防抖(debounce):就是讓某個函式在上一次執行之後,滿足等待某個時間內不再觸發此函式後再執行,而在這個等待時間內再次觸發函式,等待時間可以重新計算,直到該函式在一定間隔內沒有被呼叫時,才開始執行被呼叫方法(所謂防抖,就是指觸發事件後在 n 秒內函式只能執行一次,如果在 n 秒內又觸發了事件,則會重新計算函式執行時間。)

應用場景

window觸發resize的時候,不斷的調整瀏覽器視窗大小會不斷的觸發這個事件,用防抖來讓其只觸發一次

函式節流(throttle):是讓乙個函式無法在很短的時間間隔內連續呼叫,當上一次執行完之後過了規定的時間間隔,才能進行下一次的函式呼叫。(所謂節流,就是指連續觸發事件但是在n秒中只執行一次函式)節流會稀釋函式的執行頻率。 即每間隔某個事件去執行某個函式,避免函式的過多執行,這個方式就叫函式節流

應用場景

手機獲取驗證碼

相同點

防抖和節流的目的都是為了減少不必要的計算,不浪費資源,只在適合的時候再進行觸發計算

不同點

防抖是將多次執行變為只執行一次,節流是將多次執行變為每隔一段時間執行

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

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

防抖和節流

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

防抖和節流

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