摘要：防抖與節流可謂是面試常見，其實很好了解，下面帶你分分鐘了解防抖與節流的基本思想與寫法~
作者：北極光之夜。
一.速識防抖：
防抖與節流可謂是面試常見，其實很好了解，下面帶你分分鐘了解防抖與節流的基本思想與寫法~
在這之前，比如我們先定義一個按鈕，并綁定一個點選事件，執行要觸發的事件：
<!-- 定義一個按鈕 -->
<input type="button" id="btn" value="按鈕" />
<script>
// 擷取标簽
var btn = document.getElementById("btn");
// 綁定事件
btn.addEventListener("click", real);
// 要觸發的事件
function real(e) {
console.log("北極光之夜。");
console.log(e);
}
</script> 執行如下：
可以發現，一直點選會一直觸發事件，如果這個事件為發送一個請求，那麼這對與伺服器來說是很不友好的。同樣的請求因為使用者的多次點選而多次發送請求，傳回的結果和隻點選一次是一樣的，大大加重伺服器壓力和影響性能。是以，我們引入防抖的概念，簡單來說，防抖就是通過setTimeout 的方式，在一定的時間間隔内，将多次觸發變成一次觸發。 直接看下面例子：
1.通過setTimeout的方式延遲執行：
第一種方式為通過設定setTimeout定時器的方式延遲執行，當快速多次點選的時候，每一次都會重置定時器，隻有你一段時間都不點選時定時器才能到達條件并執行事件函數。
<input type="button" id="btn" value="按鈕" />
<script>
var btn = document.getElementById("btn");
// 點選後觸發trigger()函數，第一個參數為真實要執行的函數，第二個參數為定時器延遲時間
btn.addEventListener("click", trigger(real, 1000));
function trigger(fn, delay) {
// 設定time為定時器，初始為 null
var time = null;
// 閉包原理，傳回一個函數
return function () {
// 如果定時器存在清空定時器
if (time) {
clearTimeout(time);
}
// 設定定時器，規定時間後執行真實要執行的函數
time = setTimeout(() => {
// 将參數傳遞給真實執行的函數，因為箭頭函數繼承父級作用域，是以直接...arguments
fn(...arguments);
}, delay);
};
}
//真實要執行函數
function real(e) {
console.log("北極光之夜。");
console.log(e);
}
</script> 其中會利用閉包的原理形成作用域，使得定時器不會被下一次點選重複或清空。
運作結果如下，每次點選都延遲執行。狂點時隻有停下後才會執行：
2.通過setTimeout的方式第一次會執行，後面不執行：
可以發現，第一種方式雖然延遲執行了，但是當使用者第一次點的時候也要延遲執行，那就很不友好了。是以下面改進，使得第一次點的時候立即執行，狂點的時候隻有第一次有效後面的都沒效：
<input type="button" id="btn" value="按鈕" />
<script>
var btn = document.getElementById("btn");
// 點選後觸發trigger()函數，第一個參數為真實要執行的函數，第二個參數為定時器延遲時間
btn.addEventListener("click", trigger(real, 1000));
function trigger(fn, delay) {
// 設定time為定時器，初始為 null
var time = null;
return function () {
//定義一個firstClick，判斷是否第一次執行，初始值為true
var firstClick = !time;
//第一次會立即執行
if (firstClick) {
fn(...arguments);
}
// 如果定時器存在清空定時器
if (time) {
clearTimeout(time);
}
// 設定定時器，此時firstClick會變為false，規定時間後time才會為null
time = setTimeout(() => {
time = null;
}, delay);
};
}
//真實要執行函數
function real(e) {
console.log("北極光之夜。");
console.log(e);
}
</script> 運作結果如下，第一次點的時候立即執行，狂點的時候隻有第一次有效後面的都沒效：
3.通過setTimeout的方式第一次會執行和最後一次執行：
前兩個其實就是防抖的經典例子了。這裡是擴充知識，繼續改進上面案例使得隻點選一次的時候立即執行。當點選多次時第一次和最後一次執行。
<input type="button" id="btn" value="按鈕" />
<script>
var btn = document.getElementById("btn");
// 點選後觸發trigger()函數，第一個參數為真實要執行的函數，第二個參數為定時器延遲時間
btn.addEventListener("click", trigger(real, 1000));
function trigger(fn, delay) {
// 設定time為定時器，初始為 null
var time = null;
return function () {
//定義一個firstClick，判斷是否第一次執行，初始值為true
var firstClick = !time;
//第一次會立即執行
if (firstClick) {
fn(...arguments);
}
// 如果定時器存在清空定時器
if (time) {
clearTimeout(time);
}
// 設定定時器，此時firstClick會變為false，規定時間後time才會為null
time = setTimeout(() => {
time = null;
// 如果firstClick為true，執行
if (!firstClick) {
fn(...arguments);
}
}, delay);
};
}
//真實要執行函數
function real(e) {
console.log("北極光之夜。");
console.log(e);
}
</script> 運作結果如下，隻點選一次的時候立即執行。當點選多次時第一次和最後一次執行。：
二.速識節流：
節流其實就很好了解了，減少一段時間的觸發頻率。簡單來說，就是你一直狂點不停的話，它會每隔一定時間就執行一次。它與防抖最大的差別就是，無論事件觸發多麼頻繁，都可以保證在規定時間内可以執行一次執行函數。下面利用計算時間戳實作：
<input type="button" id="btn" value="按鈕" />
<script>
var btn = document.getElementById("btn");
// 點選後觸發trigger()函數，第一個參數為真實要執行的函數，第二個參數為限制時間
btn.addEventListener("click", trigger(real, 500));
function trigger(fn, delay) {
// 設定bef，為上一次執行時間，初始為0
var bef = 0;
return function () {
// 擷取目前時間戳
var now = new Date().getTime();
//如果目前時間減去上次時間大于限制時間時才執行
if (now - bef > delay) {
// 執行函數
fn(...arguments);
//執行後，上次時間指派為這次執行時間
bef = now;
}
};
}
//真實要執行函數
function real(e) {
console.log("北極光之夜。");
console.log(e);
}
</script> 運作結果如下，一點就運作。狂點不停的話，每隔500毫秒才執行一次。：
也可以用定時器實作節流，如下：
實作第一次點的時候也延遲執行，狂點不停的話，它會每隔一定時間就執行一次。
<input type="button" id="btn" value="按鈕" />
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click", trigger(real, 500));
function real(e) {
console.log("北極光之夜。");
console.log(e);
}
function trigger(fn, delay) {
// flag為ture
var flag = true;
return function () {
// 如果flag為true執行定時器
if (flag) {
setTimeout(() => {
//到規定時間後執行函數，同時 flag = true;
fn(...arguments);
flag = true;
}, delay);
}
// flag = false;防止一直執行
flag = false;
};
}
</script> 效果如下：