防抖和節流簡介

什麼是防抖和節流

防抖

當事件被頻繁觸發時，不想讓其頻繁執行事件處理函數的一種解決方案。

該方案通過設定一個周期延遲執行動作，如果周期内又被重新觸發，則重新設定周期，直到周期結束，執行動作。

節流

節流的方案是通過設定一個周期，在周期内隻執行一次，如果在周期内重新觸發事件，則不執行。一個周期結束後，開始新的周期。

為什麼要防抖和節流

1. 頻繁觸發事件會占用較多浏覽器資源造成浏覽器卡頓
2. 響應速度跟不上觸發速度，導緻頁面加載緩慢

防抖實作方式

function debounce(fun, delay) {
        var timer = null;
        return function(args) {
        //擷取函數的作用域
            var that = this;
            //每次觸發事件都會清除定時器，并重新設定逾時調用
            clearTimeout(timer)
            timer = setTimeout(function() {
                fun.call(that, args);
            }, delay);
        }
    }
           

它規定了執行的周期，周期一到就執行，它的周期可能會一直延長，因為它的周期會重新計時

該方法适用于雖然觸發事件很頻繁但仍有間隔的情況

節流實作方式

function throttle(fun, delay) {
  let last, deferTimer
  return function (args) {
   let that = this;
   let _args = arguments;
 //開始計時
   let now = +new Date();
   //如果在一個周期内，取消上一個定時器，重新設定定時器
   if (last && now < last + delay) {

   clearTimeout(deferTimer);
   deferTimer = setTimeout(function () {
   //開始新的周期
    last = now;
    fun.call(that, _args);
   }, delay)
   } else {
   //開始新的周期
   last = now;
   fun.call(that, _args);
   }
  }
  }
           

該方法由于觸發事件的随機性需要通過時間戳計算執行周期，在周期内隻執行一次，規定了執行的次數，它的周期是計算間隔的長度

該方法适用于一直觸發事件中間沒有間隔的情況

總結

1. 防抖和節流都是對與頻繁觸發事件的解決方案，旨在減少相應的次數以保持浏覽器的高效運作
2. 防抖和節流各有特色，可以根據需要進行選擇，防抖适用于有間隔的頻繁觸發事件的情況，節流适用于一直觸發事件的情況