關於js函式節流理解
阿新 • • 發佈：2018-11-16
函式節流的目的
從字面上就可以理解，函式節流就是用來節流函式從而一定程度上優化效能的。例如，DOM 操作比起非DOM 互動需要更多的記憶體和CPU 時間。連續嘗試進行過多的DOM 相關操作可能會導致瀏覽器掛起，有時候甚至會崩潰。尤其在IE 中使用onresize 事件處理程式的時候容易發生，當調整瀏覽器大小的時候，該事件會連續觸發。在onresize 事件處理程式內部如果嘗試進行DOM 操作，其高頻率的更改可能會讓瀏覽器崩潰。又例如，我們常見的一個搜尋的功能，我們一般是繫結keyup事件，每按下一次鍵盤就搜尋一次。但是我們的目的主要是每輸入一些內容搜尋一次而已。為了解決這些問題，就可以使用定時器對函式進行節流。
函式節流的原理
某些程式碼不可以在沒有間斷的情況連續重複執行。第一次呼叫函式，建立一個定時器，在指定的時間間隔之後執行程式碼。當第二次呼叫該函式時，它會清除前一次的定時器並設定另一個。如果前一個定時器已經執行過了，這個操作就沒有任何意義。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器。目的是隻有在執行函式的請求停止了一段時間之後才執行。
簡單的搜尋demo
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>函式節流</title> </head> <body> <input id="search" type="text" name="search"> <script> var searchResult = (text) =>{ console.log("搜尋：" + text); } var val = ''; const input = document.getElementById("search"); input.addEventListener("keyup", function(event){ let value = this.value.replace(/(\s*$)/g, "");//去除最後的空格 if(val !== value || val === ''){//和上次記錄的搜尋內容比較，內容一致則不搜尋，第一次預設進入 throttle(searchResult, null, 500, this.value, 1000); } }); function throttle(Fun, context, layTime, text, allTime){ clearTimeout(Fun.timer); Fun._cur = Date.now(); //記錄當前時間 if(!Fun._start){ //若該函式是第一次呼叫，則直接設定_start,即開始時間，為_cur，即此刻的時間 Fun._start = Fun._cur; } if(Fun._cur - Fun._start > allTime){ //當前時間與上一次函式被執行的時間作差，與allTime比較，若大於，則必須執行一次函式，若小於，則重新設定計時器 Fun.call(context, text); Fun._start = Fun._cur; val = text; }else{ Fun.timer = setTimeout(()=>{ Fun.call(context, text); val = text; },layTime); } } </script> </body> </html>
執行結果：
好吧，就到這了，如果有錯誤的地方，希望大家及時指正