防抖和節流

防抖：

h1>防抖

h1>

<

input

type

="text"

id="ipt"

/>

body

>

<

script

>

const inputdom

=document.getelementbyid(

'ipt')

//高頻事件觸發後一段時間（delay）只會執行一次函式，如果指定時間（delay）內高頻事件再次被觸發，則重新計算時間

function

debounce(fn, delay)

timer

=settimeout(()

=>

, delay)}}

inputdom.addeventlistener(

'input',

debounce(e

=>

, 300

) )

script

>

html

>

節流：

h1>節流
h1>
<
div 
class
="box"
draggable
="true"
>
div>
body
>
<
script
>
const box 
=document.queryselector(
'.box')
//節流 一段時間內只執行一次某個操作； 過了這段時間 還有操作的話 繼續執行新的操作
function
throttle(fn, delay) 
timer 
=settimeout(() 
=>
, delay)}}
box.addeventlistener(
'drag',
throttle(
function
(e) , 
300)
)script
>
html
>

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

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

防抖和節流

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

防抖和節流

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