當(dāng)某個(gè)函數(shù)短時(shí)間內(nèi)被頻繁重復(fù)調(diào)用池颈，無疑會(huì)影響應(yīng)用性能秩命，同時(shí)也帶來資源消耗多矮，例如：
- 在輸入框內(nèi)容變化試氯析，自動(dòng)觸發(fā)接口提交或者做接口查詢
- 多次觸發(fā)onClick缎岗、onScroll静尼、onMousemove事件
等場景之下，都有可能會(huì)出現(xiàn)這個(gè)問題传泊。
要處理這個(gè)問題鼠渺，就需要控制函數(shù)的調(diào)用次數(shù)和頻率，不能每次觸發(fā)都去做一次執(zhí)行眷细。這個(gè)時(shí)候就需要引入函數(shù)防抖和節(jié)流兩個(gè)概念拦盹，下面我就來詳細(xì)介紹一下。
首先我們用 mousemove 事件復(fù)現(xiàn)函數(shù)被頻繁重復(fù)調(diào)用的場景溪椎，頁面代碼如下：
<body>
<div id="box">0</div>
</body>
<script>
var $box = document.getElementById('box');
var runTimes = 0
$box.addEventListener('mousemove', onMouseMoveEvent)
function onMouseMoveEvent() {
runTimes++;
box.innerHTML = runTimes;
}
</script>
在瀏覽器上運(yùn)行代碼普舆，效果如下：
從上面的 gif 圖可以看出，在監(jiān)聽 mousemove 事件的區(qū)域內(nèi)移動(dòng)鼠標(biāo)校读，onMouseMoveEvent 函數(shù)調(diào)用次數(shù)迅速迭加沼侣，短時(shí)間內(nèi)到達(dá)了幾百次。
據(jù)此歉秫，我們就抽象的畫出 onMouseMoveEvent 函數(shù)15s內(nèi)被調(diào)用次數(shù)的模擬圖如下：
- 圖上黃色豎條代表 onMouseMoveEvent 函數(shù)的一次調(diào)用執(zhí)行
下面我們看一下在引入防抖節(jié)流后蛾洛，函數(shù)調(diào)用次數(shù)和頻率有什么變化。
函數(shù)防抖（debounce）
先看一下常見防抖函數(shù)
function debounce(func, wait) {
let timeout;
return function () {
const context = this;
const args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}
}
從代碼邏輯上雁芙，我們可以理解函數(shù)防抖的期望效果為：
- 給定一個(gè)延遲時(shí)間轧膘，當(dāng)函數(shù)被調(diào)用時(shí)間間隔小于該時(shí)間時(shí)不會(huì)立即執(zhí)行，而是繼續(xù)等待却特，當(dāng)?shù)却龝r(shí)間超過這個(gè)設(shè)定時(shí)間時(shí)扶供，就執(zhí)行該函數(shù)。
實(shí)際效果如何裂明，我們給 mousemove 事件引入防抖看一下
$box.addEventListener('mousemove',debounce(onMouseMoveEvent, 1000))
將 mousemove 事件響應(yīng)函數(shù) onMouseMoveEvent 傳入防抖函數(shù) debounce
等待時(shí)間 wait 設(shè)置為 1000ms
我們看一下執(zhí)行效果：
從 gif 圖可以看出椿浓，onMouseMoveEvent 函數(shù)被調(diào)用次數(shù)明顯減少，在區(qū)域內(nèi)移動(dòng)鼠標(biāo)調(diào)用次數(shù)不會(huì)變化闽晦，在鼠標(biāo)停頓1s后扳碍，調(diào)用次數(shù)會(huì)加1，直到鼠標(biāo)停止移動(dòng)1s以后仙蛉，調(diào)用會(huì)停止笋敞。
據(jù)此，我們?cè)俪橄蟮漠嫵鲆敕蓝逗筌瘢琽nMouseMoveEvent 被調(diào)用次數(shù)的示例圖：
這里我們可以稍微總結(jié)一下：
- 函數(shù)引入防抖后夯巷，如果調(diào)用時(shí)間間隔小于設(shè)置的等待時(shí)間赛惩，那么上一次的調(diào)用就會(huì)被忽略，直到間隔時(shí)間大于等待時(shí)間的時(shí)候才會(huì)執(zhí)行后觸發(fā)的那一次執(zhí)行趁餐。
其實(shí)防抖函數(shù)還有另外一種立即執(zhí)行版本喷兼，代碼如下：
function debounce(func,wait) {
let timeout;
return function () {
const context = this;
const args = arguments;
if (timeout) clearTimeout(timeout);
const callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
}
實(shí)際上在常用的JavaScript 工具庫 Underscore 中，會(huì)將是否立即執(zhí)行作為一個(gè)配置項(xiàng)后雷，下面就是一個(gè)類似的可配置防抖函數(shù)：
/**
* @desc 函數(shù)防抖
* @param func 函數(shù)
* @param wait 延遲執(zhí)行毫秒數(shù)
* @param immediate true 表立即執(zhí)行季惯，false 表非立即執(zhí)行
*/
function debounce(func,wait,immediate) {
let timeout;
return function () {
const context = this;
const args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
const callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
else {
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
}
函數(shù)節(jié)流（throttle）
節(jié)流與防抖都是為了再頻繁觸發(fā)的時(shí)候控制調(diào)用次數(shù)，但不同之處在于臀突，節(jié)流是希望可以細(xì)水長流勉抓，調(diào)用的頻率顯得比防抖更加規(guī)律，下面我們看一下節(jié)流函數(shù)：
function throttle(func, wait) {
let timeout;
return function() {
let context = this;
let args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
通過上面的實(shí)現(xiàn)代碼可以看出候学，節(jié)流函數(shù)并沒有在函數(shù)頻繁調(diào)用的時(shí)候藕筋，通過 clearTimeout 去重置定制器，而是在定時(shí)器初始化之后盒齿，即timeout === true的時(shí)候念逞，保障該定時(shí)器順利執(zhí)行完困食，這樣就有了上面講到的調(diào)用頻率更加規(guī)律边翁。
下面我們就將節(jié)流函數(shù)應(yīng)用到 mousemove 監(jiān)聽事件上
$box.addEventListener('mousemove',throttle(onMouseMoveEvent, 1000))
- 將 mousemove 事件響應(yīng)函數(shù) onMouseMoveEvent 傳入節(jié)流函數(shù) throttle
- 等待時(shí)間 wait 設(shè)置為 1000ms
我們看一下執(zhí)行效果：
從 gif 圖可以看出，onMouseMoveEvent 函數(shù)被調(diào)用次數(shù)同樣增加的比較緩慢硕盹，在區(qū)域內(nèi)移動(dòng)鼠標(biāo)符匾，調(diào)用次數(shù)會(huì)每隔1s加一次，直到鼠標(biāo)停止移動(dòng)1s以后瘩例，調(diào)用會(huì)停止啊胶。
同樣的，我們來抽象一下引入節(jié)流函數(shù)后 onMouseMoveEvent 被調(diào)用次數(shù)的示例圖：
這里我們可以對(duì)節(jié)流函數(shù)做一下總結(jié)：
- 函數(shù)引入節(jié)流后垛贤，首次觸發(fā)的函數(shù)開啟定時(shí)器后焰坪，等待時(shí)間內(nèi)的所有觸發(fā)都會(huì)被忽略，直到定時(shí)器完成函數(shù)執(zhí)行聘惦，下一次觸發(fā)才會(huì)開啟新的定時(shí)器某饰，循環(huán)上面的過程。
另外善绎，節(jié)流函數(shù)還有時(shí)間戳版本黔漂，但是因?yàn)椴挥绊懳覀兝斫夤?jié)流思想，所以不做擴(kuò)展禀酱，感興趣的朋友可以自行搜索炬守。
參考資料：
