javascript - 调整大小功能加载页面

Question

对于侧面菜单，重新计算高度:适用于平板电脑和桌面。它似乎工作得越来越少，但是当我开始在真实设备上测试时，我注意到由于 resize 函数中编写的功能，一切都运行得太慢。不要告诉我如何以正常方式重构代码，以便在设备上工作的速度更快？谢谢!

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') 回调可以快速连续调用多次。我建议不要立即重新计算所有内容，而是对计算进行去抖动:

$(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_DELAY 毫秒。如果调用 _debounce 并且存在现有计时器，则计时器将被取消，以便 _resize 仅在 last 调用 _debounce