防抖與截流總結

//防抖 是指在事件觸發結束後延時一段時間再去執行**，如果在延時期間再次觸發該事件，則重新計算延時時間

//第乙個引數為事件觸發後需要執行的方法，第二個引數為延時時間function debounce(method, delay) 
timer =
settimeout
(function()
, delay);}
}let fun=
debounce((
)=>
,600);
window.
addeventlistener
('resize'
, fun)
;//截流 是指在規定時間內只觸發一次事件，減少事件執行的頻率
function
throttle
(func, wait)
func.
(context, arg)
lasttime = now
}elseif(
!timeout)
, wait)}}
}let quest =
throttle((
)=>
,1000
)let btn = document.
getelementsbytagname
('button')[
0];btn.
addeventlistener
('click'
,quest)

截流 和 防抖

截流防抖函式經常用在頻繁按鈕操作，頁面滾動觸發，滑鼠拖拽，輸入查詢等功能中。是為了在頻繁操作中為了減少效能損耗的小技巧,這兩個概念常用但是又容易混淆,下面簡單的分析下防抖與截流的異同之處 意味著防止抖動出現的誤操作，也就是防止像抖動一樣的頻繁操作。所以在防抖函式裡會有個時間限制，當函式在一次執行之後...

js 防抖 截流

突發奇想，在觸發事件的時候，一些會頻繁觸發的事件會不會造成資源的浪費或者大量的計算造成頁面卡頓，比如onresize,onscroll,onmousemove等事件。然後就引出了乙個新知識點 防抖 截流。防抖 是指在事件觸發結束後延時一段時間再去執行 如果在延時期間再次觸發該事件，則重新計算延時時間...

函式截流和防抖

使用場景 有些時候，部分函式會高頻觸發，比如 function showtop window.onscroll showtop 這個函式的觸發頻率非常的高，然而實際上我們並不需要如此高頻的反饋，畢竟瀏覽器的效能是有限的，不應該浪費在這裡，優化這種場景的做法就是防抖。其他使用場景 頁面resize事件...