防抖和節流

最近在面試的時候有一面試題是關於防抖節流的，回來加強了一下，做以下總結，希望對大家有所幫助！

先來說一下防抖和節流的應用場景

防抖 - debounce：

1、input框輸入時，可以使用防抖節約資源的請求，比如搜尋框

2、window觸發resize時，當使用者停止改變視窗的大小時，再觸發事件

節流 - throttle：

1、 scroll滾動事件

2、滑鼠不斷點選，mouseover事件等

總結：防抖： 當觸發間隔大於設定時間，執行業務方法，分為兩種，立即執行防抖，非立即執行防抖

//

非立即執行防抖

//立即執行防抖

function debounce(fun,wait) ,wait)}}

// 封裝防抖函式，根據自己的需求設定，immediate判斷是否立即執行

function debounce(fun,wait,immediate) ,wait)

} else ,wait)}}

}

//節流，連續觸發事件，每隔一定時間，執行一次業務方法

//第一種，定時器方式，第一次觸發需要等待delay

function

throttle(func,delay) , delay);}}
} //第二種，時間戳方式，第一次觸發無需等待
function throttle(func,delay) 
}//封裝，type為1時使用時間戳，type為2時使用定時器

return function() 

}else if(type == 2) ,delay)}}

}}

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

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

防抖和節流

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

防抖和節流

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