一、概念解釋
?函數(shù)節(jié)流和函數(shù)防抖摩钙，兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。
?大家大概都知道舊款電視機(jī)的工作原理查辩，就是一行行得掃描出色彩到屏幕上胖笛，然后組成一張張圖片。由于肉眼只能分辨出一定頻率的變化宜岛，當(dāng)高頻率的掃描长踊，人類是感覺(jué)不出來(lái)的。反而形成一種視覺(jué)效果萍倡，就是一張圖身弊。就像高速旋轉(zhuǎn)的風(fēng)扇，你看不到扇葉遣铝，只看到了一個(gè)圓一樣佑刷。
?同理莉擒，可以類推到j(luò)s代碼酿炸。在一定時(shí)間內(nèi)，代碼執(zhí)行的次數(shù)不一定要非常多涨冀。達(dá)到一定頻率就足夠了填硕。因?yàn)榕艿迷蕉啵瑤?lái)的效果也是一樣。倒不如扁眯，把js代碼的執(zhí)行次數(shù)控制在合理的范圍壮莹。既能節(jié)省瀏覽器CPU資源，又能讓頁(yè)面瀏覽更加順暢姻檀，不會(huì)因?yàn)閖s的執(zhí)行而發(fā)生卡頓命满。這就是函數(shù)節(jié)流和函數(shù)防抖要做的事。
函數(shù)節(jié)流是指一定時(shí)間內(nèi)js方法只跑一次绣版。比如人的眨眼睛胶台，就是一定時(shí)間內(nèi)眨一次。這是函數(shù)節(jié)流最形象的解釋杂抽。
函數(shù)防抖是指頻繁觸發(fā)的情況下，只有足夠的空閑時(shí)間，才執(zhí)行代碼一次晌杰。比如生活中的坐公交缀遍，就是一定時(shí)間內(nèi)，如果有人陸續(xù)刷卡上車杭朱，司機(jī)就不會(huì)開車阅仔。只有別人沒(méi)刷卡了，司機(jī)才開車痕檬。
二霎槐、函數(shù)節(jié)流
?函數(shù)節(jié)流應(yīng)用的實(shí)際場(chǎng)景，多數(shù)在監(jiān)聽(tīng)頁(yè)面元素滾動(dòng)事件的時(shí)候會(huì)用到梦谜。因?yàn)闈L動(dòng)事件丘跌，是一個(gè)高頻觸發(fā)的事件。以下是監(jiān)聽(tīng)頁(yè)面元素滾動(dòng)的示例代碼：
// 函數(shù)節(jié)流
var flag= true;
document.getElementById("throttle").onscroll = function(){
if(!flag){
// 判斷是否已空閑唁桩，如果在執(zhí)行中闭树，則直接return
return;
}
flag= false;
setTimeout(function(){
console.log("函數(shù)節(jié)流");
flag= true;
}, 300);
};
函數(shù)節(jié)流的要點(diǎn)是，聲明一個(gè)變量當(dāng)標(biāo)志位荒澡，記錄當(dāng)前代碼是否在執(zhí)行报辱。
如果空閑，則可以正常觸發(fā)方法執(zhí)行单山。
如果代碼正在執(zhí)行碍现，則取消這次方法執(zhí)行，直接return米奸。
這個(gè)函數(shù)節(jié)流的實(shí)現(xiàn)形式昼接，需要注意的是執(zhí)行的間隔時(shí)間是>=300ms。如果具體執(zhí)行的方法是包含callback的悴晰，也可以將flag=true這一步放到callback中慢睡。理解了函數(shù)節(jié)流的關(guān)卡設(shè)置重點(diǎn)逐工，其實(shí)改起來(lái)就簡(jiǎn)單多了。
三漂辐、函數(shù)防抖
?函數(shù)防抖的應(yīng)用場(chǎng)景泪喊，最常見(jiàn)的就是用戶注冊(cè)時(shí)候的手機(jī)號(hào)碼驗(yàn)證和郵箱驗(yàn)證了。只有等用戶輸入完畢后髓涯，前端才需要檢查格式是否正確袒啼，如果不正確，再?gòu)棾鎏崾菊Z(yǔ)纬纪。以下還是以頁(yè)面元素滾動(dòng)監(jiān)聽(tīng)的例子瘤泪，來(lái)進(jìn)行解析：
// 函數(shù)防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
clearTimeout(timer); // 清除未執(zhí)行的代碼，重置回初始化狀態(tài)
timer = setTimeout(function(){
console.log("函數(shù)防抖");
}, 300);
};
函數(shù)防抖的要點(diǎn)育八，也是需要一個(gè)setTimeout來(lái)輔助實(shí)現(xiàn)对途。延遲執(zhí)行需要跑的代碼。
如果方法多次觸發(fā)髓棋，則把上次記錄的延遲執(zhí)行代碼用clearTimeout清掉实檀，重新開始。
如果計(jì)時(shí)完畢按声，沒(méi)有方法進(jìn)來(lái)訪問(wèn)觸發(fā)膳犹，則執(zhí)行代碼。
函數(shù)防抖的實(shí)現(xiàn)重點(diǎn)签则，就是巧用setTimeout做緩存池须床，而且可以輕易地清除待執(zhí)行的代碼。
