說(shuō)幾個(gè)場(chǎng)景螺句。
- 提交按鈕1秒內(nèi)連續(xù)多次點(diǎn)擊 => 我只想觸發(fā)一次提交函數(shù) 【防抖】
- 實(shí)時(shí)搜索的時(shí)候，我還在打拼音的時(shí)候不想立馬觸發(fā)搜索函數(shù)芽唇，會(huì)卡死 => 我想輸入完一個(gè)詞再觸發(fā) , 或者解讀當(dāng)我在不停的輸入的時(shí)候取劫，每隔500ms搜索一下研侣。 【節(jié)流】
- 但我滑動(dòng)過(guò)一個(gè)頁(yè)面長(zhǎng)度的時(shí)候疚膊，網(wǎng)頁(yè)右下角出現(xiàn)一個(gè)“回到頂部”的按鈕=> scroll太頻繁，我不想觸發(fā)太頻繁寓盗，可以設(shè)置直到滑動(dòng)結(jié)束才判定 【防抖】璧函，也可以滑動(dòng)時(shí)每隔500ms斷定一次 【節(jié)流】
總結(jié)
防抖：是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行
節(jié)流：是將多次執(zhí)行變?yōu)槊扛粢欢螘r(shí)間執(zhí)行
JS代碼
/**
* 防抖 是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行
* @param {*} fn 要執(zhí)行的函數(shù)
* @param {*} delay 響應(yīng)的毫秒
* @returns
*/
function debounce (fn, delay = 1000) = {
let timer = null
return function() {
if(timer){clearTimeout(timer) }
timer = setTimeout(fn,delay) // 簡(jiǎn)化寫(xiě)法
}
}
/**
* 節(jié)流 是將多次執(zhí)行變?yōu)槊扛粢欢螘r(shí)間執(zhí)行
* @param {*} fn 要執(zhí)行的函數(shù)
* @param {*} delay 響應(yīng)的毫秒
* @returns
*/
function throttle(fn, delay = 1000) = {
let timer = null;
return function() {
if(timer) {
return;
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay)
}
}
