Как сделать этот код более правильным и легковесным? Почему функция, где ресайз грузит страницу?

Question

[z_u_l]

Для бокового меню есть перерасчет для высоты: адаптива, для планшета и для десктопа. Вроде бы все более менее работает, но когда начал тестировать на реальных устройствах, заметил, что все работает слишком медленно из-за функции того, что написано в функции ресайза. Не подскажете, как можно привести\отрефакторить код в нормальный вид, чтобы скорость работы на устройствах была более быстрой? Как сделать более правильным? Что я делаю не так? Спасибо!

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%");
});

Comments

[Егор Живагин]

А можешь код в песочницу выложить? codepen , jsfiddle

Задавать body фиксированную высоту - это так себе решение.
Я почти уверен, что всё это можно написать на css , но нужен пример в песочнице

[z_u_l]

Егор Живагин, ой, забыл вставить ссыль на codepen https://codepen.io/malinosky/pen/JOVdOG
Буду благодарен, если подскажешь

Answer 1

[Владимир]

А небіло желания посмотреть на https://developer.mozilla.org/ru/docs/Web/CSS/Medi...
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

[Кирилл]

Гуглите на темы throttle, debounce
Событие resize отрабатывает очень часто, а вашу функцию достаточно раз в 300-500 мс вызывать.
https://developer.mozilla.org/ru/docs/Web/Events/resize
bencentra.com/code/2015/02/27/optimizing-window-re...

Answer 3

[ой всё]

сделать два разных css - для десктопа и мобильных устройств
в js назначаются или удалются только соответствующе css классы
а то, что вы написали жаваскриптом - это ужас-ужас, в общем, прогаммирование даже такое простое - это не ваше