防抖和節(jié)流的區(qū)別垄分,防抖是把多次操作合并成一個(gè)觸發(fā)執(zhí)行饲宛,節(jié)流相當(dāng)于開(kāi)水龍頭就轧,水大了關(guān)小险掀,一段時(shí)間執(zhí)行一次
函數(shù)防抖(debounce):
當(dāng)持續(xù)觸發(fā)事件時(shí)沪袭,一定時(shí)間段內(nèi)沒(méi)有再觸發(fā)事件,事件處理函數(shù)才會(huì)執(zhí)行一次樟氢,如果設(shè)定的時(shí)間到來(lái)之前冈绊,又一次觸發(fā)了事件,就重新開(kāi)始延時(shí)埠啃。
限定多少秒時(shí)間之內(nèi) 死宣,它只能執(zhí)行一次,如果執(zhí)行多次碴开,也只取最后的那一次
注:定時(shí)器記得return出去毅该,執(zhí)行函數(shù)的apply指向,且盡量使用es5函數(shù)潦牛,不用箭頭函數(shù)眶掌,this指向的是window,es5中,this指向事件本身
節(jié)流函數(shù):
????Throttle? 與防抖區(qū)別:無(wú)需清理定時(shí)器巴碗,而防抖會(huì)清除之前的計(jì)時(shí)器而重新設(shè)置朴爬。這樣一來(lái),只有最后一次操作能被觸發(fā),定時(shí)器內(nèi)的timer=null不能少
總結(jié):
函數(shù)防抖:將幾次操作合并為一此操作進(jìn)行橡淆。原理是維護(hù)一個(gè)計(jì)時(shí)器召噩,規(guī)定在delay時(shí)間后觸發(fā)函數(shù),但是在delay時(shí)間內(nèi)再次觸發(fā)的話(huà)逸爵,就會(huì)清除之前的計(jì)時(shí)器而重新設(shè)置具滴。這樣一來(lái),只有最后一次操作能被觸發(fā)师倔。
函數(shù)節(jié)流:使得一定時(shí)間內(nèi)只觸發(fā)一次函數(shù)构韵。原理是通過(guò)判斷是否到達(dá)一定時(shí)間來(lái)觸發(fā)函數(shù)。
區(qū)別:?函數(shù)節(jié)流不管事件觸發(fā)有多頻繁,都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)贞绳,而函數(shù)防抖只是在最后一次事件后才觸發(fā)一次函數(shù)谷醉。 比如在頁(yè)面的無(wú)限加載場(chǎng)景下,我們需要用戶(hù)在滾動(dòng)頁(yè)面時(shí)冈闭,每隔一段時(shí)間發(fā)一次 Ajax 請(qǐng)求俱尼,而不是在用戶(hù)停下滾動(dòng)頁(yè)面操作時(shí)才去請(qǐng)求數(shù)據(jù)。這樣的場(chǎng)景萎攒,就適合用節(jié)流技術(shù)來(lái)實(shí)現(xiàn)遇八。