JS防抖和節(jié)流
? ??在進(jìn)行窗口的resize、scroll，輸入框內(nèi)容校驗(yàn)等操作時(shí)，如果事件處理函數(shù)調(diào)用的頻率無限制，會加重瀏覽器的負(fù)擔(dān)，導(dǎo)致用戶體驗(yàn)非常糟糕。此時(shí)我們可以采用debounce（防抖）和throttle（節(jié)流）的方式來減少調(diào)用頻率，同時(shí)又不影響實(shí)際效果
函數(shù)防抖
? ? 當(dāng)持續(xù)觸發(fā)事件時(shí)，一定時(shí)間段內(nèi)沒有觸發(fā)事件，才會執(zhí)行一次事件觸發(fā)函數(shù)，如果設(shè)定的時(shí)間來到之前，又出發(fā)了一次事件，就重新開始延時(shí)
如下圖，持續(xù)觸發(fā)scroll事件，不會觸發(fā)事件函數(shù)，只有當(dāng)一定時(shí)間段內(nèi)沒有觸發(fā)事件，才會執(zhí)行一次事件觸發(fā)函數(shù)。
var timer;? ? //undefined
window.onscroll = function(){
? ? //如果當(dāng)前timer不是空，說明前面有一個(gè)等待的請求還未發(fā)送，就停止前面的等待
? ? if(timer !== undefined){}
? ? ? ? clearTimeout(timer);
};
//再重新開始下一輪等待
timer = setTimerout(function(){
? ? //當(dāng)200ms內(nèi)，未發(fā)生滾動時(shí)，才發(fā)送正式的ajax請求
? ? console.log("發(fā)送ajax請求，加載更多數(shù)據(jù)...")
},200);
函數(shù)節(jié)流
? ? 當(dāng)持續(xù)觸發(fā)事件時(shí)，保證一段時(shí)間內(nèi)只執(zhí)行一次觸發(fā)函數(shù)
<body>
? ? <button id="btn">加載更多<button>
</body>
<script>
? ? var canClick = true;? ? //全局開關(guān)變量
? ? btn.onclick=function(){????
? ? if(canClick){? ? //如果當(dāng)前開關(guān)開著說明可以單擊
? ???????canClick = false;? ? ?//先關(guān)閉開關(guān)?
? ? ? ? //再發(fā)請求
? ? ????console.log("發(fā)送ajax請求，加載更多信息...")
? ? ????setTimeout(function(){
? ? ? ? ????console.log("加載完成")
? ? ? ? ? ? //在函數(shù)的結(jié)尾打開開關(guān)準(zhǔn)備下一次單擊
????????????canClick = true;
????????},2000)
? ??}
}
</script>
