JS進階篇--JS函數(shù)節(jié)流（throttle）

cpupro 發(fā)布于2019-08-20 16:41 / 2911人閱讀

摘要：函數(shù)節(jié)流的原理函數(shù)節(jié)流的原理挺簡單的，估計大家都想到了，那就是定時器。在高級程序設(shè)計一書有介紹函數(shù)節(jié)流，里面封裝了這樣一個函數(shù)節(jié)流函數(shù)，它把定時器存為函數(shù)的一個屬性個人的世界觀不喜歡這種寫法。

什么是函數(shù)節(jié)流？

介紹前，先說下背景。在前端開發(fā)中，有時會為頁面綁定resize事件，或者為一個頁面元素綁定拖拽事件（其核心就是綁定mousemove），這種事件有一個特點，就是用戶不必特地搗亂，他在一個正常的操作中，都有可能在一個短的時間內(nèi)觸發(fā)非常多次事件綁定程序。而大家知道，DOM操作時很消耗性能的，這個時候，如果你為這些事件綁定一些操作DOM節(jié)點的操作的話，那就會引發(fā)大量的計算，在用戶看來，頁面可能就一時間沒有響應(yīng)，這個頁面一下子變卡了變慢了。甚至在IE下，如果你綁定的resize事件進行較多DOM操作，其高頻率可能直接就使得瀏覽器崩潰。

怎么解決？函數(shù)節(jié)流就是一種辦法。話說第一次接觸函數(shù)節(jié)流(throttle)，還是在看impress源代碼的時候，impress在播放的時候，如果窗口大小發(fā)生改變(resize)，它會對整體進行縮放(scale)，使得每一幀都完整顯示在屏幕上：

稍微留心，你會發(fā)現(xiàn)，當(dāng)你改變窗體大小的時候，不管你怎么拉，怎么拽，都沒有立刻生效，而是在你改變完大小后的一會兒，它的內(nèi)容才進行縮放適應(yīng)。看了源代碼，它用的就是函數(shù)節(jié)流的方法。

函數(shù)節(jié)流，簡單地講，就是讓一個函數(shù)無法在很短的時間間隔內(nèi)連續(xù)調(diào)用，只有當(dāng)上一次函數(shù)執(zhí)行后過了你規(guī)定的時間間隔，才能進行下一次該函數(shù)的調(diào)用。以impress上面的例子講，就是讓縮放內(nèi)容的操作在你不斷改變窗口大小的時候不會執(zhí)行，只有你停下來一會兒，才會開始執(zhí)行。

函數(shù)節(jié)流的原理

函數(shù)節(jié)流的原理挺簡單的，估計大家都想到了，那就是定時器。當(dāng)我觸發(fā)一個時間時，先setTimout讓這個事件延遲一會再執(zhí)行，如果在這個時間間隔內(nèi)又觸發(fā)了事件，那我們就clear掉原來的定時器，再setTimeout一個新的定時器延遲一會執(zhí)行，就這樣。

代碼實現(xiàn)

明白了原理，那就可以在代碼里用上了，但每次都要手動去新建清除定時器畢竟麻煩，于是需要封裝。在《JavaScript高級程序設(shè)計》一書有介紹函數(shù)節(jié)流，里面封裝了這樣一個函數(shù)節(jié)流函數(shù)：

function throttle(method, context) {
     clearTimeout(methor.tId);
     method.tId = setTimeout(function(){
         method.call(context);
     }， 100);
 }

它把定時器ID存為函數(shù)的一個屬性（= =個人的世界觀不喜歡這種寫法）。而調(diào)用的時候就直接寫

window.onresize = function(){
    throttle(myFunc);
}

這樣兩次函數(shù)調(diào)用之間至少間隔100ms。

而impress用的是另一個封裝函數(shù)：

var throttle = function(fn, delay){
     var timer = null;
     return function(){
         var context = this, args = arguments;
         clearTimeout(timer);
         timer = setTimeout(function(){
             fn.apply(context, args);
         }, delay);
     };
 };

它使用閉包的方法形成一個私有的作用域來存放定時器變量timer。而調(diào)用方法為

window.onresize = throttle(myFunc, 100);

兩種方法各有優(yōu)劣，前一個封裝函數(shù)的優(yōu)勢在把上下文變量當(dāng)做函數(shù)參數(shù)，直接可以定制執(zhí)行函數(shù)的this變量；后一個函數(shù)優(yōu)勢在于把延遲時間當(dāng)做變量（當(dāng)然，前一個函數(shù)很容易做這個拓展），而且個人覺得使用閉包代碼結(jié)構(gòu)會更優(yōu)，且易于拓展定制其他私有變量，缺點就是雖然使用apply把調(diào)用throttle時的this上下文傳給執(zhí)行函數(shù)，但畢竟不夠靈活。

深化函數(shù)節(jié)流

函數(shù)節(jié)流讓一個函數(shù)只有在你不斷觸發(fā)后停下來歇會才開始執(zhí)行，中間你操作得太快它直接無視你。這樣做就有點太絕了。resize一般還好，但假如你寫一個拖拽元素位置的程序，然后直接使用函數(shù)節(jié)流，那恭喜你，你會發(fā)現(xiàn)你拖動時元素是不動的，你拖完了，它直接閃到終點去。

其實函數(shù)節(jié)流的出發(fā)點，就是讓一個函數(shù)不要執(zhí)行得太頻繁，減少一些過快的調(diào)用來節(jié)流。當(dāng)你改變?yōu)g覽器大小，瀏覽器觸發(fā)resize事件的時間間隔是多少？我不清楚，個人猜測是16ms（每秒64次），反正跟mousemove一樣非常太頻繁，一個很小的時間段內(nèi)必定執(zhí)行，這是瀏覽器設(shè)好的，你無法直接改。而真正的節(jié)流應(yīng)該是在可接受的范圍內(nèi)盡量延長這個調(diào)用時間，也就是我們自己控制這個執(zhí)行頻率，讓函數(shù)減少調(diào)用以達到減少計算、提升性能的目的。假如原來是16ms執(zhí)行一次，我們?nèi)绻l(fā)現(xiàn)resize時每50ms一次也可以接受，那肯定用50ms做時間間隔好一點。

而上面介紹的函數(shù)節(jié)流，它這個頻率就不是50ms之類的，它就是無窮大，只要你能不間斷resize，刷個幾年它也一次都不執(zhí)行處理函數(shù)。我們可以對上面的節(jié)流函數(shù)做拓展：

var throttleV2 = function(fn, delay, mustRunDelay){
     var timer = null;
     var t_start;
     return function(){
         var context = this, args = arguments, t_curr = +new Date();
         clearTimeout(timer);
         if(!t_start){
             t_start = t_curr;
         }
         if(t_curr - t_start >= mustRunDelay){
             fn.apply(context, args);
             t_start = t_curr;
         }
         else {
             timer = setTimeout(function(){
                 fn.apply(context, args);
             }, delay);
         }
     };
 };

在這個拓展后的節(jié)流函數(shù)升級版，我們可以設(shè)置第三個參數(shù)，即必然觸發(fā)執(zhí)行的時間間隔。如果用下面的方法調(diào)用

window.onresize = throttleV2(myFunc, 50, 100);

則意味著，50ms的間隔內(nèi)連續(xù)觸發(fā)的調(diào)用，后一個調(diào)用會把前一個調(diào)用的等待處理掉，但每隔100ms至少執(zhí)行一次。原理也很簡單，打時間tag，一開始記錄第一次調(diào)用的時間戳，然后每次調(diào)用函數(shù)都去拿最新的時間跟記錄時間比，超出給定的時間就執(zhí)行一次，更新記錄時間。

到現(xiàn)在為止呢，當(dāng)我們在開發(fā)中遇到類似的問題，一個函數(shù)可能非常頻繁地調(diào)用，我們有了幾個選擇：一呢，還是用原來的寫法，頻繁執(zhí)行就頻繁執(zhí)行吧，哥的電腦好；二是用原始的函數(shù)節(jié)流；三則是用函數(shù)節(jié)流升級版。不是說第一種就不好，這要看實際項目的要求，有些就是對實時性要求高。而如果要求沒那么苛刻，我們可以視具體情況使用第二種或第三種方法，理論上第二種方法執(zhí)行的函數(shù)調(diào)用最少，性能應(yīng)該節(jié)省最多，而第三種方法則更加地靈活，你可以在性能與體驗上探索一個平衡點。

轉(zhuǎn)載自AlloyTeam：http://www.alloyteam.com/2012...
擴展閱讀：JS魔法堂：函數(shù)節(jié)流（throttle）與函數(shù)去抖（debounce）