摘要：防抖與節流可謂是面試常見，其實很好理解，下面帶你分分鐘瞭解防抖與節流的基本思想與寫法~
本文分享自華為雲社群《JS防抖與節流快速瞭解與應用》，作者：北極光之夜。 。
一.速識防抖：
防抖與節流可謂是面試常見，其實很好理解，下面帶你分分鐘瞭解防抖與節流的基本思想與寫法~
在這之前，比如我們先定義一個按鈕，並繫結一個點選事件，執行要觸發的事件：
<!-- 定義一個按鈕 --> <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>
其中會利用閉包的原理形成作用域，使得定時器不會被下一次點選重複或清空。閉包不清楚的可以看我這篇文章?： https://auroras.blog.csdn.net/article/details/119520871
執行結果如下，每次點選都延遲執行。狂點時只有停下後才會執行：
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>
效果如下：
三.總結：
防抖與節流方法多多，不同的需求也會有不同的寫法，重要的是搞清原理就好。防抖就是通過setTimeout 的方式，在一定的時間間隔內，將多次觸發變成一次觸發 。節流:就是減少一段時間的觸發頻率。防抖與節流最大的區別就是，無論事件觸發多麼頻繁，都可以保證在規定時間內可以執行一次執行函式。
對了，給你們推薦一本好書，我今天剛看完的《秋園》，楊本芬老人的著作。看完久久不能平靜。一本書對映著一個時代。同時也對映著那個時代的人們最純粹，最樸實的酸甜苦辣。