js前端性能優化之函數節流和函數防抖

前言：針對一些會頻繁觸發的事件如scroll、resize，如果正常綁定事件處理函數的話，有可能在很短的時間內多次連續觸發事件，十分影響性能

節流：

節流：使得一定時間內只觸發一次函數。
它和防抖動最大的區別就是，節流函數不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數，而防抖動只是在最后一次事件后才觸發一次函數。
原理是通過判斷是否到達一定時間來觸發函數，若沒到規定時間則使用計時器延后，而下一次事件則會重新設定計時器

主要有兩種實現方法：

• 時間戳
• 定時器

時間戳實現：當高頻事件觸發時，第一次應該會立即執行（給事件綁定函數與真正觸發事件的間隔如果大於delay的話），而后再怎么頻繁觸發事件，也都是會每delay秒才執行一次。而當最后一次事件觸發完畢后，事件也不會再被執行了。

var throttle = function(func,delay){
    var prev = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if(now-prev>=delay){
            func.apply(context,args);
            prev = Date.now();
        }
    }
}

定時器實現： 當觸發事件的時候，我們設置一個定時器，再觸發事件的時候，如果定時器存在，就不執行；直到delay秒后，定時器執行執行函數，清空定時器，這樣就可以設置下個定時器。

var throttle = fucntion(func,delay){
    var timer = null;

    return funtion(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                func.apply(context,args);
                timer = null;
            },delay);
        }
    }
}

當第一次觸發事件時，肯定不會立即執行函數，而是在delay秒后才執行。 
之后連續不斷觸發事件，也會每delay秒執行一次。 
當最后一次停止觸發后，由於定時器的delay延遲，可能還會執行一次函數。

綜合使用時間戳與定時器，完成一個事件觸發時立即執行，觸發完畢還能執行一次的節流函數：

var throttle = function(func,delay){
    var timer = null;
    var startTime = Date.now();

    return function(){
        var curTime = Date.now();
        var remaining = delay-(curTime-startTime);
        var context = this;
        var args = arguments;

        clearTimeout(timer);
        if(remaining<=0){
            func.apply(context,args);
            startTime = Date.now();
        }else{
            timer = setTimeout(func,remaining);
        }
    }
}

防抖動:

防抖動：將幾次操作合並為一此操作進行。原理是維護一個計時器，規定在delay時間后觸發函數，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設置。這樣一來，只有最后一次操作能被觸發

// 將會包裝事件的 debounce 函數
function debounce(fn, delay) {
  // 維護一個 timer
  let timer = null;

  return function() {
    // 通過 ‘this’ 和 ‘arguments’ 獲取函數的作用域和變量
    let context = this;
    let args = arguments;

    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}

1. 首先，我們為scroll事件綁定處理函數，這時debounce函數會立即調用，
　因此給scroll事件綁定的函數實際上是debounce內部返回的函數

2. 每一次事件被觸發，都會清除當前的 timer 然后重新設置超時調用。
    這就會導致每一次高頻事件都會取消前一次的超時調用，導致事件處理程序不能被觸發

3. 只有當高頻事件停止，最后一次事件觸發的超時調用才能在delay時間后執行

寫在最后： 節流和防抖運用場景還是蠻多的，也是最為性能優化的一大利器；歡迎指正不足之處