防抖和節流

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
防抖和節流<
/title>
#quan
<
/style>
<
/head>
<
!-- 防抖是控制次數，節流是控制頻率 --
>
"quan"
>
<
/div>
// 滑鼠在盒子裡移動就會讓i++
let quan=document.
getelementbyid
('quan'
)let i=
0// quan.addeventlistener('mousemove',debounce_2(move,1000))//這個函式也是非同步函式
quan.
addeventlistener
('mousemove'
,throttle_2
(move,
1000))
// ++方法
function
move()
// 防抖函式
// 非立即執行版
function
debounce_1
(func,wait)
,wait)}}
// 立即執行版
function
debounce_2
(func,wait)
,wait)
quan && func.
(context,args)
//一開始就直接執行一次}}
// 節流函式
// 時間戳版
function
throttle_1
(func,wait)}}
// 定時器版
function
throttle_2
(func,wait)
,wait)}}
}<
/script>
<
/body>
<
/html>

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

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

防抖和節流

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

防抖和節流

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