深入理解javascript函數進階系列第三篇——函數節流和函數防抖

前面的話

　　javascript中的函數大多數情況下都是由用戶主動調用觸發的，除非是函數本身的實現不合理，否則一般不會遇到跟性能相關的問題。但在一些少數情況下，函數的觸發不是由用戶直接控制的。在這些場景下，函數有可能被非常頻繁地調用，而造成大的性能問題。解決性能問題的處理辦法就是函數節流和函數防抖。本文將詳細介紹函數節流和函數防抖

 

常見場景

　　下面是函數被頻繁調用的常見的幾個場景

　　1、mousemove事件。如果要實現一個拖拽功能，需要一路監聽 mousemove 事件，在回調中獲取元素當前位置，然后重置 dom 的位置來進行樣式改變。如果不加以控制，每移動一定像素而觸發的回調數量非常驚人，回調中又伴隨着 DOM 操作，繼而引發瀏覽器的重排與重繪，性能差的瀏覽器可能就會直接假死。

　　2、window.onresize事件。為window對象綁定了resize事件，當瀏覽器窗口大小被拖動而改變的時候，這個事件觸發的頻率非常之高。如果在window.onresize事件函數里有一些跟DOM節點相關的操作，而跟DOM節點相關的操作往往是非常消耗性能的，這時候瀏覽器可能就會吃不消而造成卡頓現象

　　3、射擊游戲的 mousedown/keydown 事件（單位時間只能發射一顆子彈）

　　4、搜索聯想（keyup事件）

　　5、監聽滾動事件判斷是否到頁面底部自動加載更多（scroll事件）

　　對於這些情況的解決方案就是函數節流（throttle）或函數去抖（debounce），核心其實就是限制某一個方法的頻繁觸發

 

定時器管理

　　在介紹函數防抖和函數節流之前，首先要介紹一下定時器管理

　　定時器管理有兩種機制：

　　第一種是只要當前函數沒有執行完成，任何新觸發的函數都會被忽略，可以實現在持續觸發事件的情況下，一段時間內只執行一次事件的效果，即函數節流

　　簡易代碼如下

function fn(method, context) {
  //忽略新函數
  if(method.tId){
    return false;
  }
  method.tId = setTimeout(function() {
    method.call(context);
  }, 1000);
}

　　第二種是只要有新觸發的函數，就立即停止執行當前函數，轉而執行新函數，可以實現在持續觸發事件的情況下，一定在事件觸發n秒后執行，如果n秒內又觸發了這個事件，則以新的事件的時間為准，還是n秒后執行，即函數防抖，簡易代碼如下

function fn(method, context) {
 //停止當前函數
  clearTimeout(method.tId);
  method.tId = setTimeout(function() {
    method.call(context);
  }, 1000);
}

 

函數防抖

　　函數防抖，字面上來說，是利用函數來防止抖動。在執行觸發事件的情況下，元素的位置或尺寸屬性快速地發生變化，造成頁面回流，出現元素抖動的現象。通過函數防抖，使得元素的位置或尺寸屬性延遲變化，從而減少頁面回流

　　簡單的防抖函數代碼如下，該函數接受2個參數，第一個參數為需要被延遲執行的函數，第二個參數為延遲執行的時間

<style>
body {
  margin: 0;
}
.show{
  width: 260px;
  height: 100px;
  font-size: 20px;
  text-align: center;
  line-height: 100px;
  background: lightgreen;
}
</style>
<div class="show" id="show">0</div>
<script>
let count = 0
const oShow = document.getElementById('show')
const changeValue = () => { oShow.innerHTML = count ++ }
const debounce = (fn, wait=30) => {
  return () => {
    clearTimeout(fn.timer)
    fn.timer = setTimeout(fn, wait)
  }
}
oShow.addEventListener('mousemove', debounce(changeValue))
</script>

　　效果如下：

　　但是，changeValue()方法中的this指向window，下面來修正this指向

const debounce = (fn, wait=30) =>{
  return function() {
    clearTimeout(fn.timer)
    fn.timer = setTimeout(fn.bind(this), wait)
  }
}

　　還有一個問題，changeValue()方法中的e為undefined，下面來修正e的值

const debounce = (fn, wait=30) =>{
  return function() {
    clearTimeout(fn.timer)
    fn.timer = setTimeout(fn.bind(this, ...arguments), wait)
  }
}

　　或者，使用apply方法

const debounce = (fn, wait=30) =>{
  return function() {
    clearTimeout(fn.timer)
    fn.timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, wait)
  }
}

 

函數節流

　　函數節流，即限制函數的執行頻率，在持續觸發事件的情況下，間斷地執行函數；實現方法對應定時器管理的第一種策略，只要當前函數沒有執行完成，任何新觸發的函數都會被忽略

const throttle = (fn, wait=100) =>{
  return function() {
    if(fn.timer) return
    fn.timer = setTimeout(() => {
      fn.apply(this, arguments)
      fn.timer = null
    }, wait)
  }
}

 

數組分塊

　　在前面關於函數節流和函數防抖的討論中，提供了限制函數被頻繁調用的解決方案。下面將遇到另外一個問題，某些函數確實是用戶主動調用的，但因為一些客觀的原因，這些函數會嚴重地影響頁面性能

　　一個例子是創建WebQQ的QQ好友列表。列表中通常會有成百上千個好友，如果一個好友用一個節點來表示，在頁面中渲染這個列表的時候，可能要一次性往頁面中創建成百上千個節點

　　在短時間內往頁面中大量添加DOM節點顯然也會讓瀏覽器吃不消，看到的結果往往就是瀏覽器的卡頓甚至假死。代碼如下：

var ary = [];
for ( var i = 1; i <= 1000; i++ ){
  ary.push( i );    // 假設 ary 裝載了 1000 個好友的數據
};
var renderFriendList = function( data ){
  for ( var i = 0, l = data.length; i < l; i++ ){
    var div = document.createElement( 'div' );
    div.innerHTML = i;
    document.body.appendChild( div );
  }
};
renderFriendList( ary );

　　這個問題的解決方案之一是數組分塊技術，下面的timeChunk函數讓創建節點的工作分批進行，比如把1秒鍾創建1000個節點，改為每隔200毫秒創建8個節點

　　數組分塊是一種使用定時器分割循環的技術，為要處理的項目創建一個隊列，然后使用定時器取出下一個要處理的項目進行處理，接着再設置另一個定時器

　　在數組分塊模式中，array變量本質上就是一個“待辦事宜”列表，它包含了要處理的項目。使用shift()方法可以獲取隊列中下一個要處理的項目，然后將其傳遞給某個函數。如果在隊列中還有其他項目，則設置另一個定時器，並通過arguments.callee調用同一個匿名函數

　　數組分塊的重要性在於它可以將多個項目的處理在執行隊列上分開，在每個項目處理之后，給予其他的瀏覽器處理機會運行，這樣就可能避免長時間運行腳本的錯誤。一旦某個函數需要花50ms以上的時間完成，那么最好看看能否將任務分割為一系列可以使用定時器的小任務

　　下面是數組分塊模式的簡易代碼

function chunk(array,process,context){
    setTimeout(function(){
        //取出下一個條目並處理
        var item = array.shift();
        process.call(context,item);
        //若還有條目，再設置另一個定時器
        if(array.length > 0){
            setTimeout(arguments.callee,100);
        }
    },100);    
}

var data = [1,2,3,4,5,6,7,8,9,0];
function printValue(item){
    var div = document.getElementById('myDiv');
    div.innerHTML += item + '<br>';
}
chunk(data.concat(),printValue);

　　下面是數組分塊的詳細代碼，timeChunk函數接受3個參數，第1個參數是創建節點時需要用到的數據，第2個參數是封裝了創建節點邏輯的函數，第3個參數表示每一批創建的節點數量

var timeChunk = function( ary, fn, count ){ 
  var obj,t;
  var len = ary.length;
  var start = function(){
    for ( var i = 0; i < Math.min( count || 1, ary.length ); i++ ){ 
      var obj = ary.shift();
      fn( obj );
    }
  };
  return function(){
    t = setInterval(function(){
      if ( ary.length === 0 ){ // 如果全部節點都已經被創建好
        return clearInterval( t );
      }
      start();
    }, 200 );    // 分批執行的時間間隔，也可以用參數的形式傳入
  };
};

　　最后進行一些小測試，假設有1000個好友的數據，利用timeChunk函數，每一批只往頁面中創建8個節點

var ary = [];
for ( var i = 1; i <= 1000; i++ ){ 
  ary.push( i );
};
var renderFriendList = timeChunk( ary, function( n ){ 
  var div = document.createElement( 'div' ); 
  div.innerHTML = n;
  document.body.appendChild( div );
}, 8 );
renderFriendList();