首頁我們來梳理一下概念的東西
1、什么是防抖
防抖(debounce):觸發(fā)高頻事件后 n 秒內(nèi)函數(shù)只會執(zhí)行一次球拦,如果 n 秒內(nèi)高頻事件再次被觸發(fā)诗轻,則重新計(jì)算時間
節(jié)流(thorttle):高頻事件觸發(fā)秕狰,但在 n 秒內(nèi)只會執(zhí)行一次,所以節(jié)流會稀釋函數(shù)的執(zhí)行頻率
分別舉例:
防抖:1篓跛、就好像在百度搜索時,每次輸入之后都有關(guān)聯(lián)的詞彈出坦刀,這個控制關(guān)聯(lián)詞的方法就不可能是輸入框內(nèi)容一改變就觸發(fā)的愧沟,他一定是當(dāng)你結(jié)束輸入一段時間之后才會觸發(fā),這時可以使用函數(shù)防抖鲤遥。
2央渣、滾動scroll事件,不涂势担滑動滾輪會連續(xù)觸發(fā)多次滾動事件芽丹,從而調(diào)用綁定的回調(diào)函數(shù),我們希望當(dāng)我們停止?jié)L動的時卜朗,才觸發(fā)一次回調(diào)拔第,這時可以使用函數(shù)防抖。
節(jié)流:1场钉、預(yù)定一個函數(shù)只有在大于等于執(zhí)行周期時才執(zhí)行蚊俺,周期內(nèi)調(diào)用不執(zhí)行。就好像你在淘寶搶購某一件限量熱賣商品時逛万,你不斷點(diǎn)刷新點(diǎn)購買泳猬,可是總有一段時間你點(diǎn)上是沒有效果,這里就用到了節(jié)流,就是怕點(diǎn)的太快導(dǎo)致系統(tǒng)出現(xiàn)bug得封。
2埋心、在項(xiàng)目中碰到的問題,移動端通過scroll實(shí)現(xiàn)分頁忙上,不斷滾動拷呆,我們不希望不斷發(fā)送請求,只有當(dāng)達(dá)到某個條件疫粥,比如茬斧,距離手機(jī)窗口底部150px才發(fā)送一個請求,接下來就是展示新頁面的請求梗逮,不停滾動项秉,如此反復(fù)、這個時候就得用到函數(shù)節(jié)流慷彤。
2伙狐、那么他們的區(qū)別是什么呢
防抖是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行,節(jié)流是將多次執(zhí)行變成每隔一段時間執(zhí)行瞬欧。