resize関数がページを読み込みます

Question

サイドメニューには、タブレットとデスクトップ用の高さ：適応型の再計算があります。実際のデバイスでテストを開始したとき、サイズ変更の機能に書かれている機能のためにすべてが遅すぎることに気づきました。どのようにリファクタリングしてコードを通常の方法で教えてはいけないので、デバイスでの作業のスピードは速くなりますか？ありがとうございました！

https://codepen.io/malinosky/pen/JOVdOG

//расчет высоты body 
var calcHeightFilter = function calcHeightFilter() { 
    var bodyHeight = $(document).outerHeight(true); 
    var asideHeight = $('.section--aside').height(); 

    if (($(document).width()) < 768) { 
     if ($('.section--aside').hasClass('open-aside')) { 
      $('.js-anchor-top').css("display", "none"); 
      if (bodyHeight > asideHeight) { 
       $('body').css("overflow", "hidden"); 
       $('body').height(asideHeight + 169); // Значение 169 - это хеадер + футер 
      } 
     } 
    } 

    if (($(document).width()) >= 768 && ($(document).width()) <= 1023) { 
     var tabletFilterHeight = $('.wrap-main').height(); 
     $(".section--aside").height(tabletFilterHeight); 
     $(".section--aside").css("overflow-y", "auto"); 


     $(".section--aside").css("height", function(){ 
      return $('.wrap-main').height() + 70; 
     }); 



     var newwTabletFilterHeight = $('.section--content').height() + 112 + $('.footer').height(); // 112 - это шапка 
      var asideNewwHeightH = $(".section--aside").height(newwTabletFilterHeight - 70); 
      $('body').height(newwTabletFilterHeight); 

     $(window).scroll(function() { 
      if ($(window).scrollTop() >= $(document).height() - $(window).height()) { 
       calcHeightFilter(); 
       $('.button_more').css('box-shadow', '0px 0px 13px 0px rgba(0, 0, 0, 0.2)'); 
      } else { 
       $('.button_more').css('box-shadow', 'none'); 
      } 
     }); 
    } 

    if (($(document).width()) > 1023) { 
     $('body').css("overflow-y", "visible"); 
     $('section--aside').css("overflow-y", "visible"); 
    } 

     $(window).on('resize', function(){ 

      if (($(document).width()) < 768) { 
       if ($('.section--aside').hasClass('open-aside')) { 
        $('.js-anchor-top').css("display", "none"); 
         $('body').css("overflow", "hidden"); 
         $('.section--aside').css("overflow", "hidden"); 
         $('.section--aside').css("height", "auto"); 
         $("body").css("height", function(){ 
          return $('.section--aside').height() + 169; 
         }); 
         $('.section--aside__close').css("display", "block"); 
         $('.section-empty').remove(); 
       } 
      } 


      if (($(document).width()) >= 768 && ($(document).width()) <= 1023) { 
       var newTabletFilterHeight = $('.section--content').height() + 112 + $('.footer').height(); 
       var asideNewHeightH = $(".section--aside").height(newTabletFilterHeight); 
       $('body').height(newTabletFilterHeight); 
       $(".section--aside").css("overflow-y", "auto"); 
       if ($('.section--aside').hasClass('open-aside')) { 
        $('.section--aside__close').css("display", "block"); 
        $(".wrap-main").append('<div class="section-empty">'); 
        $('body').height(newTabletFilterHeight + $('.section-empty').height()); 
       } 
      } 


      if (($(document).width()) > 1023) { 
       $('body').css("height", "inherit"); 
       $('.section-empty').remove(); 
       $(".footer").css("margin-bottom", "0"); 
       $('.section--aside__close').css("display", "none"); 
       $('body').css("overflow", "visible"); 
       $('.section--aside').css("overflow", "visible"); 
       $('.section--aside').css("height", "auto"); 
      } 
     }); 

} 

// Открытие/закрытие фильтра в каталоге 
$(document).on('click', '.js-filter_show', function(){ 
    $(".section--aside").addClass("open-aside"); 
    $(".section--catalog").addClass("overlay-section"); 
    $('.section--aside__close').css("display", "block"); 

    if (($(document).width()) >= 768 && ($(document).width()) <= 1023) { 
     $(".wrap-main").append('<div class="section-empty">'); 
    } 

    calcHeightFilter(); 
}); 

$(document).on('click', '.section--aside__close', function(){ 
    $(".section--aside").removeClass("open-aside"); 
    $('.section--aside__close').css("display", "none"); 
    $(".section--catalog").removeClass("overlay-section"); 
    $('.section-empty').remove(); 
    $('body').css("overflow", "visible"); 
    $('body').css("height", "100%"); 
}); 

Answer 1

$(window).on('resize')コールバックが立て続けに何度も呼び出すことができます。代わりに、すぐにすべてを再計算するのは、私は計算をデバウンス示唆している：これは_debounce関数はresize関数を呼び出す前にDEBOUNCE_DELAYミリ秒待機し、タイマーを設定している仕組み

$(window).on('resize', _debounce); 

// Time to wait before calling resize in milliseconds 
var DEBOUNCE_DELAY = 250; 

var timeout = null; 
function _debounce() { 
    timeout = setTimeout(function() { 
     timeout = null; 
     resize(); 
    }, DEBOUNCE_DELAY); 
} 

function resize() { 
    // perform all calculations here. 
} 

を。 _debounceが呼び出され、既存のタイマーがあるされている場合は_resizeは一度だけ呼び出されるように、タイマーが取り消されます、_debounce