概念
函數(shù)的節(jié)流與防抖是優(yōu)化JavaScript的高頻率執(zhí)行的一種手段。
節(jié)流
函數(shù)的節(jié)流應(yīng)用于一些函數(shù)高頻率的場(chǎng)景，多數(shù)在監(jiān)聽頁(yè)面元素一直觸發(fā)的事件。例如高頻率觸發(fā)的滾動(dòng)事件。
來看看下面監(jiān)聽滾動(dòng)事件的例子：
let canRun = true;
document.getElementById('scroll').onscroll = function () {
if (canRun) return;
canRun = false;
setTimeout(function () {
console.log('do something');
canRun = true;
}, 300)
}
- 首先定義一個(gè)變量（函數(shù)運(yùn)行的開關(guān)）；
- 每次在函數(shù)運(yùn)行的時(shí)候檢測(cè)開關(guān)（判斷符合運(yùn)行條件）；
- 符合條件利用setTimeout運(yùn)行行數(shù)；
- 最后，等setTimeout里面的方法執(zhí)行完畢，把執(zhí)行條件canRun = true，允許下次執(zhí)行；
防抖
防抖函數(shù)通常運(yùn)用在表單驗(yàn)證中。在驗(yàn)證的過程中往往是等待用戶輸入完畢后再進(jìn)行驗(yàn)證。需要檢查格式是否正確。如果不正確在進(jìn)行錯(cuò)誤提示。下面我們還是用滾動(dòng)的例子來看看：
let timer = false;
document.getElementById('scroll').onscroll = function () {
clearTimeout(timer);
timer = setTimeout(function () {
console.log('do something');
}, 300)
}
- 首先先定義一個(gè)標(biāo)記；
- 在執(zhí)行函數(shù)的過程中，先會(huì)清理一遍timer；
- 然后在定義一個(gè)timer；在這里利用setTimeout做一個(gè)緩存。
這里巧妙的利用setTimeout做了一個(gè)緩存，每次在運(yùn)行函數(shù)的時(shí)候都會(huì)清理一遍timer，在利用setTimeout做一個(gè)函數(shù)緩存。避免了函數(shù)的多次運(yùn)行。其實(shí)，用隊(duì)列的方式也可以做到這種效果。這里就不深入了。
