當(dāng)我在做監(jiān)聽頁面滾動(dòng),實(shí)時(shí)保存頁面高度的需求的時(shí)候鬓长,發(fā)現(xiàn)每當(dāng)頁面滾動(dòng)一下就會記錄很多次谒拴,這對性能來說是極其不友好的,所以這時(shí)候需要給性能做一下優(yōu)化
1. 防抖涉波、節(jié)流
防抖和節(jié)流都能優(yōu)化 js 性能英上,他們兩個(gè)的區(qū)別是:
- 函數(shù)節(jié)流的情況下,函數(shù)將每個(gè) n 秒執(zhí)行一次
- 函數(shù)防抖的情況下啤覆,函數(shù)將延遲函數(shù)執(zhí)行苍日,只執(zhí)行最后一次
/*函數(shù)節(jié)流*/
function throttle(fn, interval) {
var enterTime = 0;//觸發(fā)的時(shí)間
var gapTime = interval || 300 ;//間隔時(shí)間,如果interval不傳窗声,則默認(rèn)300ms
return function() {
var context = this;
var backTime = new Date();//第一次函數(shù)return即觸發(fā)的時(shí)間
if (backTime - enterTime > gapTime) {
fn.call(context,arguments);
enterTime = backTime;//賦值給第一次觸發(fā)的時(shí)間相恃,這樣就保存了第二次觸發(fā)的時(shí)間
}
};
}
/*函數(shù)防抖*/
function debounce(fn, interval) {
var timer;
var gapTime = interval || 1000;//間隔時(shí)間,如果interval不傳笨觅,則默認(rèn)1000ms
return function() {
clearTimeout(timer);
timer = setTimeout(function() {
fn();
}, gapTime);
};
}