函數(shù)節(jié)流和去抖的用法和區(qū)別

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

函數(shù)節(jié)流

在頻繁觸發(fā)的情況下，需要執(zhí)行的邏輯只有執(zhí)行完之后，才能繼續(xù)執(zhí)行下一次.示例代碼:

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

函數(shù)去抖

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

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

應(yīng)用場景

一般是一些高頻率觸發(fā)的地方,然后想要優(yōu)化性能.比如監(jiān)聽屏幕滾動,鼠標(biāo)拖拽等等.


歡迎關(guān)注微信公眾號:猴哥說前端