防抖與節流

2022-05-09 06:33:08 字數 980 閱讀 4616

防抖節流傻傻分不清楚概念,總是弄混了,平時還好,要使用的時候google一下就明白了,可是面試要是說反了,那就死翹翹了,對於簡單的知識點,分數一定要拿穩。

節流

當持續觸發事件時,保證一定時間段內只呼叫一次事件處理函式(秉著開源節流的生活觀,雖然我天天逛某寶,可是限制自己乙個月只能買一件,此乃節流)

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

title

>節流

title

>

head

>

<

body

>

<

div

idstyle

="height:600px"

>

div>

<

script

>

window.onload

=function

()

function

commonfn(value) , value);}}

}window.addeventlistener(

'scroll

', commonfn(

2000

)) }

script

>

body

>

html

>

防抖

當持續觸發事件時,一定時間段內沒有再觸發事件,事件處理函式才會執行一次,如果設定的時間到來之前,又一次觸發了事件,就重新開始

節流與防抖

瀏覽器中某些計算和處理要比其他的昂貴,例如在瀏覽器中操作dom比非dom互動需要更多的記憶體和cpu的事件,連續嘗試進行過多的dom相關操作可能ui導致瀏覽器掛起,有時甚至會崩潰。尤其在ie中使用onresize事件處理程式的時候容易發生,當調整瀏覽器大小的時候,該事件會連續觸發。在onresize...

防抖與節流

防抖 當事件持續觸發,一定時間內沒有觸發事件函式處理一次。比如輸入框的ajax請求做模糊查詢 節流 當時間持續觸發,在一秒內只能觸發一次。比如滾動條持續向下滾動,載入更多資料 function debounce fn,wait function throttle func,delay functio...

節流與防抖

在實際開發中,我們經常會遇到一類需求 根據input輸入容來校驗或者搜尋資料,根據視窗的大小變化來進行相關操作等。如果事件操作函式跟使用者的操作保持實時同步,那麼當使用者的操作十分頻繁時,就會多出許多無用的事件操作,並加重瀏覽器的負擔,影響頁面的效能。這時我們可以採用debounce 防抖 和thr...