使用防抖和節(jié)流技術(shù)的意義：節(jié)約資源，提升用戶體驗(yàn)。
瀏覽器中有許多事件會(huì)在很小時(shí)間間隔內(nèi)頻繁觸發(fā)，比如：監(jiān)聽(tīng)用戶的輸入（keyup怎披、keydown）胸嘁、
瀏覽器窗口調(diào)整大小和滾動(dòng)行為（resize、scroll）凉逛、鼠標(biāo)的移動(dòng)行為（mousemove）等性宏。
如果這些事件一觸發(fā)我們就執(zhí)行相應(yīng)的事件處理函數(shù)的話，那將會(huì)造成較大的資源浪費(fèi)或者給用戶帶來(lái)不好的體驗(yàn)状飞。
防抖（debounce）
防抖：觸發(fā)高頻事件后n秒內(nèi)函數(shù)只會(huì)執(zhí)行一次毫胜，如果n秒內(nèi)高頻事件再次被觸發(fā)，則重新計(jì)算時(shí)間诬辈。
思路：每次觸發(fā)事件時(shí)都取消之前的延時(shí)調(diào)用方法酵使。
function debounce(fn, ms) {
let timeout = null; // 創(chuàng)建一個(gè)標(biāo)記用來(lái)存放定時(shí)器的返回值
return function () {
clearTimeout(timeout); // 每當(dāng)用戶輸入的時(shí)候把前一個(gè) setTimeout clear 掉
// 然后又創(chuàng)建一個(gè)新的 setTimeout, 這樣就能保證輸入字符后的 interval 間隔內(nèi)如果還有字符輸入的話，就不會(huì)執(zhí)行 fn 函數(shù)
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, ms);
};
}
// 使用例子
function sayHi() {
console.log('防抖成功');
}
節(jié)流（throttle）
節(jié)流： 高頻事件觸發(fā)焙糟，但在n秒內(nèi)只會(huì)執(zhí)行一次口渔，所以節(jié)流會(huì)稀釋函數(shù)的執(zhí)行頻率。
思路：每次觸發(fā)事件時(shí)都判斷當(dāng)前是否有等待執(zhí)行的延時(shí)函數(shù)穿撮。
function throttle(fn, ms) {
let canRun = true; // 通過(guò)閉包保存一個(gè)標(biāo)記
return function () {
if (!canRun) return; // 在函數(shù)開(kāi)頭判斷標(biāo)記是否為true缺脉，不為true則return
canRun = false; // 立即設(shè)置為false
setTimeout(() => { // 將外部傳入的函數(shù)的執(zhí)行放在setTimeout中
fn.apply(this, arguments);
/* 最后在setTimeout執(zhí)行完畢后再把標(biāo)記設(shè)置為true(關(guān)鍵)表示可以執(zhí)行下一次循環(huán)了。
當(dāng)定時(shí)器沒(méi)有執(zhí)行的時(shí)候標(biāo)記永遠(yuǎn)是false混巧，在開(kāi)頭被return掉 */
canRun = true;
}, ms);
};
}
// 使用例子
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi, 1000));
使用場(chǎng)景
防抖應(yīng)用的例子：判斷用戶的輸入情況枪向，只在用戶停止輸入一段時(shí)間后再進(jìn)行判斷勤揩。
節(jié)流應(yīng)用的例子：滾動(dòng)頁(yè)面垂直滾動(dòng)條咧党，判斷是否滾動(dòng)到頁(yè)面底部。
