最近看了函數節流的相關內容，具體什么是節流我不討論了，網上很多，這里總結下兩個方法，我只認可其中一個。另一個貌似也能達到節流的效果但是感覺不是很正規。
方法一：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>函數節流</title> <style> div{ font-size:40px; color:red; text-align: center; } </style></head><body><div>0</div> <script>var a=0; var oDiv=document.getElementsByTagName('div')[0]; var throttle=function(fn,wait){ var startTime=new Date(); return function(){ var arg=arguments; var context=this; var curTime=new Date(); // 如果達到了規定的觸發時間間隔，觸發 handler var remaing=wait-(curTime-startTime) if(remaing<=0||remaing>wait){//按理說remaing足夠證明已經到了時間間隔，但是為了防止客戶端修改了時間所以加個條件(為什么這么加我也不懂) fn.apply(context,arg); startTime=curTime; } }; }; window.onmousemove=throttle(function(){ a++; oDiv.innerText=a+""; },2000); </script></body></html>我比較認可這個方法，另外這是簡潔版，還有一種可以是這樣子的
function throttle(fun, delay, time) { var timeout, startTime = new Date(); return function() { var context = this, args = arguments, curTime = new Date(); clearTimeout(timeout); // 如果達到了規定的觸發時間間隔，觸發 handler if (curTime - startTime >= time) { fun.apply(context, args); startTime = curTime; // 沒達到觸發間隔，重新設定定時器 } else { timeout = setTimeout(function(){ fun.apply(context, args); }, delay); } };};就是在判斷完時間間隔后再加個計時器來延遲，這個我覺得加不加都行，加了也沒錯跟時間判斷互補，不加也能實現節流的效果。
第二類寫法：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>函數節流</title> <style> div{ font-size:40px; color:red; text-align: center; } </style></head><body><div>0</div> <script> var a=0; var oDiv=document.getElementsByTagName('div')[0]; var throttle=function(fn,time){ var timer=null; return function(){ var arg=arguments; var context=this; if(timer){ return false; } else{ timer=setTimeout(function(){ clearTimeout(timer); timer=null; fn.apply(context,arg); },time); } }; }; window.onmousemove=throttle(function(){ a++; oDiv.innerText=a+""; },2000); </script></body></html>這種寫法通過判斷是否存在正在進行的計時器來決定是否執行函數，存在就結束運行函數，但是那個計時器仍在隊列里進行實踐一到還會執行，通過運行也能達到節流，也就是間隔固定的時間觸發函數，但是我就是不太喜歡這種寫法。可能是這種方法沒第一種直接吧。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
