对于侧边菜单,重新计算高度:自适应,平板电脑和桌面。它似乎工作越来越少,但是当我开始在真实设备上进行测试时,我注意到由于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%");
});
答案 0 :(得分:0)
可以快速连续多次调用$(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
函数设置一个定时器,在调用DEBOUNCE_DELAY
函数之前等待resize
毫秒。如果调用_debounce
并且存在现有计时器,则会在最后调用_resize
之后仅取消_debounce
一次计时器p>