深入理解JS防抖與節流

參考博客：JS防抖和節流，感謝作者的用心分享
日常開發過程中，滾動事件做復雜計算頻繁調用回調函數很可能會造成頁面的卡頓，這時候我們更希望把多次計算合並成一次，只操作一個精確點，JS把這種方式稱為debounce（防抖）和throttle（節流）

函數防抖

當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函數才會執行一次，如果設定時間到來之前，又觸發了事件，就重新開始延時。也就是說當一個用戶一直觸發這個函數，且每次觸發函數的間隔小於既定時間，那么防抖的情況下只會執行一次。

function debounce(fn, wait) {
    var timeout = null;      //定義一個定時器
    return function() {
        if(timeout !== null) 
                clearTimeout(timeout);  //清除這個定時器
        timeout = setTimeout(fn, wait);  
    }
}
// 處理函數
function handle() {
    console.log(Math.random()); 
}
// 滾動事件
window.addEventListener('scroll', debounce(handle, 1000));

如上所見，當持續觸發scroll函數，handle函數只會在1秒時間內執行一次，在滾動過程中並沒有持續執行，有效減少了性能的損耗

函數節流

當持續觸發事件時，保證在一定時間內只調用一次事件處理函數，意思就是說，假設一個用戶一直觸發這個函數，且每次觸發小於既定值，函數節流會每隔這個時間調用一次
用一句話總結防抖和節流的區別：防抖是將多次執行變為最后一次執行，節流是將多次執行變為每隔一段時間執行
實現函數節流我們主要有兩種方法：時間戳和定時器
例如

var throttle = function(func, delay) {
    var prev = Date.now();
    return function() {
        var context = this;   //this指向window
        var args = arguments;
        var now = Date.now();
        if (now - prev >= delay) {
            func.apply(context, args);
            prev = Date.now();
        }
    }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

這個節流函數利用時間戳讓第一次滾動事件執行一次回調函數，此后每隔1000ms執行一次，在小於1000ms這段時間內的滾動是不執行的
再舉一個定時器的例子：

var throttle = function(func, delay) {
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

當觸發事件的時候，我們設置了一個定時器，在沒到1000ms之前這個定時器為null，而到了規定時間執行這個函數並再次把定時器清除。也就是說當第一次觸發事件，到達規定時間再執行這個函數，執行之后馬上清除定時器，開始新的循環，那么我們看到的效果就是，滾動之后沒有馬上打印，而是等待1000ms打印，有一個延遲的效果，並且這段時間滾動事件不會執行函數。
單用時間戳或者定時器都有缺陷，我們更希望第一次觸發馬上執行函數，最后一次觸發也可以執行一次事件處理函數

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);   //取消當前計數器並計算新的remaining
              }
      }
}
function handle() {
      console.log(Math.random());
}
 window.addEventListener('scroll', throttle(handle, 1000));

在節流函數內部使用開始時間startTime、當前時間curTime和剩余時間remaining，當剩余時間小於等於0意味着執行處理函數，這樣保證第一次就能立即執行函數並且每隔delay時間執行一次；如果還沒到時間，就會在remaining之后觸發，保證最后一次觸發事件也能執行函數，如果在remaining時間內又觸發了滾動事件，那么會取消當前的計數器並計算出新的remaing時間。通過時間戳和定時器的方法，我們實現了第一次立即執行，最后一次也執行，規定時間間隔執行的效果，可以靈活運用在開發中
PS：防抖和節流能有效減少瀏覽器引擎的損耗，防止出現頁面堵塞卡頓現象，應該熟練掌握。最后再次感謝原作者的總結，熱心分享技術讓我們的生活變得更好