概念
函數的節(jié)流與防抖是優(yōu)化JavaScript的高頻率執(zhí)行的一種手段亥鸠。
-
節(jié)流
函數的節(jié)流應用于一些函數高頻率的場景盖桥，多數在監(jiān)聽頁面元素一直觸發(fā)的事件。例如高頻率觸發(fā)的滾動事件。
來看看下面監(jiān)聽滾動事件的例子：
let canRun = true;
document.getElementById('scroll').onscroll = function () {
if (canRun) return;
canRun = false;
setTimeout(function () {
console.log('do something');
canRun = true;
}, 300)
}
首先定義一個變量（函數運行的開關）齿税；
每次在函數運行的時候檢測開關（判斷符合運行條件）牵舱；
符合條件利用setTimeout運行行數芜壁；
最后窟蓝，等setTimeout里面的方法執(zhí)行完畢雇卷，把執(zhí)行條件canRun = true，允許下次執(zhí)行；
-
防抖
防抖函數通常運用在表單驗證中调榄。在驗證的過程中往往是等待用戶輸入完畢后再進行驗證今穿。需要檢查格式是否正確拔创。如果不正確在進行錯誤提示立倍。下面我們還是用滾動的例子來看看：
let timer = false;
document.getElementById('scroll').onscroll = function () {
clearTimeout(timer);
timer = setTimeout(function () {
console.log('do something');
}, 300)
}
首先先定義一個標記君珠；
在執(zhí)行函數的過程中材部，先會清理一遍timer；
然后在定義一個timer；在這里利用setTimeout做一個緩存棵磷。
這里巧妙的利用setTimeout做了一個緩存规丽，每次在運行函數的時候都會清理一遍timer松嘶，在利用setTimeout做一個函數緩存。避免了函數的多次運行。其實傲绣，用隊列的方式也可以做到這種效果。這里就不深入了。
