函數節流和去抖的用法和區別

我們都知道頻繁觸發執行一段js邏輯代碼對性能會有很大的影響，尤其是在做一些效果實現方面，或者邏輯中需要進行後端請求，更是會導致卡頓，效果失效等結果，所以在處理類似的情況時，可以考慮使用函數節流和函數去抖來解決，至於具體使用哪一種方式，根據實際情況分析定奪,先來講解一些這兩者的概念,以下是我個人的一些看法,若有不足,希望大家可以提出.

函數節流

在頻繁觸發的情況下，需要執行的邏輯只有執行完之後，才能繼續執行下一次.示例代碼:

// 函數節流例子
var can = true;
window.onscroll = function(){
  if(!can){
   //判斷上次邏輯是否執行完畢，如果在執行中，則直接return
   return;
  }
  can = false;
  setTimeout(function(){
    //執行邏輯
    can = true;
  }, 100);
};

函數去抖

在頻繁觸發的情況下，只有足夠的空閒時間，才執行代碼一次，如果沒有執行完就清除掉，重新執行邏輯,示例代碼:

// 函數去抖
var timer = null;
window.onscroll = function(){
    if (timer) {
      // 清除未執行的邏輯，重新執行下一次邏輯，不論上一次是否執行完畢
      clearTimeout(timer); 
    }
    timer = setTimeout(function(){
        //執行邏輯
    }, 300);
};

應用場景

一般是一些高頻率觸發的地方,然後想要優化性能.比如監聽屏幕滾動,鼠標拖拽等等.