防抖
- 防抖：觸發(fā)多次事件后蝌麸，只會(huì)執(zhí)行最后一次代碼式曲，節(jié)省多次執(zhí)行損耗囚枪，先上代碼
const debounce = (f,delay) => {
let timer = null;
return () => {
clearTimeout( timer );
timer = setTimeout( () => {
f();
} ,delay )
}
}
如代碼所示：運(yùn)用閉包的模式實(shí)現(xiàn)防抖咆槽，當(dāng)我們頻繁的點(diǎn)擊一個(gè)按鈕或者觸發(fā)一個(gè)事件的時(shí)候陈轿，可以先封裝一個(gè)防抖函數(shù)，f變量就是傳入的要執(zhí)行的事件函數(shù)秦忿，當(dāng)我們?cè)赿elay時(shí)間內(nèi)多次觸發(fā)同一個(gè)事件麦射，每一次進(jìn)入都會(huì)清空timer的定時(shí)器，并且重新執(zhí)行setTimeout灯谣，所以當(dāng)我們?cè)谕粫r(shí)間進(jìn)入潜秋，會(huì)不斷清空之前的定時(shí)器，最后只執(zhí)行最后一次setTimeout胎许。
防抖實(shí)際中常用的例子：
- 搜索的聯(lián)想詞（ 用戶在不斷輸入值時(shí)峻呛，在短時(shí)間內(nèi)會(huì)不斷觸發(fā)oninput事件，oninput會(huì)向后端拿去搜索結(jié)果辜窑，這樣很耗費(fèi)網(wǎng)絡(luò)資源钩述，用防抖來實(shí)現(xiàn)，在delay時(shí)間內(nèi)谬擦，只有最后一次事件才會(huì)觸發(fā)切距，這樣可以控制delay為1秒鐘，那樣只有當(dāng)用戶停止輸入事件超過1秒惨远，才會(huì)去調(diào)用網(wǎng)絡(luò)請(qǐng)求谜悟，用防抖來節(jié)約請(qǐng)求資源 ）
- window實(shí)現(xiàn)resize的時(shí)候，不斷的調(diào)整瀏覽器窗口大小會(huì)不斷的觸發(fā)這個(gè)同樣的事件北秽，用防抖來讓其只觸發(fā)一次（提高用戶體驗(yàn)）
節(jié)流
- 節(jié)流：高頻事件觸發(fā)后葡幸，規(guī)定時(shí)間內(nèi)內(nèi)只會(huì)執(zhí)行一次，節(jié)流會(huì)稀釋函數(shù)的執(zhí)行頻率,同樣先上代碼
const throttle = (func,delay) => {
let timer = true;
return () => {
if( !timer ) return;
timer = false;
setTimeout( () => {
func();
timer = true;
},delay)
}
}
如代碼所示：節(jié)流通過timer一開始變量為true控制贺氓，當(dāng)timer為true蔚叨，就不會(huì)跳出函數(shù)，執(zhí)行下面的timer = false，然后開啟一個(gè)定時(shí)器setTimeout蔑水，當(dāng)setTimeout還沒開始執(zhí)行的時(shí)候邢锯，連續(xù)觸發(fā)節(jié)流事件，timer的狀態(tài)因?yàn)殚]包的原因搀别，只要還沒執(zhí)行setTimeout丹擎，就會(huì)一直是false狀態(tài)，此時(shí)歇父，他會(huì)在if( !timer ) return;中跳出函數(shù)蒂培，不會(huì)再開啟新的定時(shí)器，所以節(jié)流實(shí)在一定時(shí)間內(nèi)只執(zhí)行一次榜苫，當(dāng)上一次執(zhí)行沒結(jié)束時(shí)护戳，不會(huì)觸發(fā)下一次的事件。
節(jié)流的實(shí)際應(yīng)用：
- 當(dāng)需要提交表單數(shù)據(jù)的時(shí)候垂睬，可能會(huì)手快點(diǎn)擊了兩次提交按鈕媳荒，這樣會(huì)發(fā)送兩次數(shù)據(jù)請(qǐng)求，如果后端沒做校驗(yàn)的話驹饺，會(huì)存到兩條相同的數(shù)據(jù)肺樟，這時(shí)候節(jié)流就可以防止同一時(shí)間內(nèi)多次觸發(fā)提交表單導(dǎo)致的問題
- 當(dāng)移動(dòng)端或者小程序端，監(jiān)聽是否到達(dá)底部事件逻淌，當(dāng)我們用戶多次上下滑動(dòng)，到達(dá)底部事件就會(huì)不斷觸發(fā)疟暖，我們到達(dá)底部多數(shù)是請(qǐng)求數(shù)據(jù)卡儒，從后端拿到數(shù)據(jù)再返回，但是可能網(wǎng)絡(luò)延遲俐巴，數(shù)據(jù)還沒渲染骨望，用戶已經(jīng)多次觸發(fā)底部事件，這樣會(huì)導(dǎo)致多次數(shù)據(jù)請(qǐng)求欣舵，如果前端拿到數(shù)據(jù)后只是單純的push進(jìn)列表擎鸠，會(huì)導(dǎo)致多個(gè)請(qǐng)求回來的數(shù)據(jù)一樣，push進(jìn)去相同的數(shù)據(jù)缘圈，這時(shí)候可以用節(jié)流來防止請(qǐng)求還沒回來的時(shí)候劣光，又發(fā)送一次相同請(qǐng)求導(dǎo)致的數(shù)據(jù)問題或者浪費(fèi)網(wǎng)絡(luò)資源的問題
區(qū)別
防抖與節(jié)流的區(qū)別可以看出，防抖是可以不斷觸發(fā)糟把，但是下一次事件會(huì)不斷覆蓋上一次的setTimeout绢涡，只到只會(huì)觸發(fā)最后一次觸發(fā)的事件。而節(jié)流是遣疯，點(diǎn)擊了第一次事件后雄可，就會(huì)在事件中加上一個(gè)鎖，在一定時(shí)間內(nèi)只會(huì)等到上一次事件執(zhí)行完，才能繼續(xù)觸發(fā)下一次事件数苫。
區(qū)別：防抖動(dòng)是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行聪舒，節(jié)流是將多次執(zhí)行變成每隔一段時(shí)間執(zhí)行。
文章僅個(gè)人理解虐急，如果有意義可以留言提出
