JS не обновляет переменную с высотой элемента. Как исправить?

Question

[Sigma Male]

У мобильной версии слайдера должно быть два ряда слайдов. Для реализации этого у самого слайдера должна быть фиксированная высота, но так как контент может меняться (это карточки товаров), то и высоту контейнера нужно менять.

Я написал скрипт который определяет карточку с самой большой высотой и на основании этого рассчитывает высоту контейнера. Но есть баг: при смене размеров устройства не меняются размеры слайдера. По какой то причине переменная height рассчитывается только один раз (в первый).

const swiper = new Swiper('.slider__slider-wrapper', {
      // КОД СЛАЙДЕРА ...
    });

    // Эта функция должна рассчитывать и менять высоту слайдера
    function calcSliderHeight() {
      // Операция проводится только для смартфонов
      if (window.innerWidth < 768) {
        // Определяем высоту самой большой карточки
        let slidesHeight = [];
        for (let i = 0; i < slides.length; i++) {
          slidesHeight.push(slides[i].offsetHeight);
        }
        let height = (Math.max.apply(null, slidesHeight) * 2) + 30;

       // ВОТ ЗДЕСЬ КАЖДЫЙ РАЗ БУДЕТ ВЫВОДИТСЯ ОДНО И ТОЖЕ ЧИСЛО
       // ТО ЧИСЛО КОТОРОЕ РАССЧИТЫВАЕТСЯ В ПЕРВЫЙ РАЗ
       alert(height); 

        // Устанавливаем высоту для  .swiper-wrapper у всех блоков .slider (верстаю по БЭМ)
        let sliders = document.querySelectorAll(".slider .swiper-wrapper")
        for (let i = 0; i < sliders.length; i++) {
          sliders[i].style.cssText = `height:${height}px`;
        }
      }
    }

    // Выборка всех слайдеров
    let slides = document.querySelectorAll(".swiper-slide")
    // Первый запуск при загрузке страница
    calcSliderHeight();
    // Запускает перерасчет высоты при смене размеров экрана
    window.addEventListener('resize', calcSliderHeight);

Пробовал убрать if (window.innerWidth < 768), не помогло.

Comments

[Антон Горецкий]

а почему height по вашему должно меняться? Вы меняете высоту окна браузера, высота самих слайдеров, при этом может оставаться постоянной. Выведите в console.log массив slidesHeight (перед получением height ) и посмотрите, меняется ли высота слайдеров(максимальная)

Answer 1

[TorVik_1]

https://developer.mozilla.org/ru/docs/Web/API/Wind...

Я добавил таймаут к функции и все заработало

window.addEventListener("resize", resizeThrottler, false);

let resizeTimeout;
function resizeThrottler() {
  // ignore resize events as long as an actualResizeHandler execution is in the queue
  if ( !resizeTimeout ) {
    resizeTimeout = setTimeout(function() {
      resizeTimeout = null;
      actualResizeHandler();

     // The actualResizeHandler will execute at a rate of 15fps
     }, 66);
  }
}

function actualResizeHandler() {
  // handle the resize event
  console.log("asdasdd")

Comments

[Sigma Male]

Хм, вставил свой код в actualResizeHandler(), работает как раньше.
Как бы, actualResizeHandler() запускается когда нужно, но при этом height имеет то значение которое было в первый раз.

[Kentavr16]

Sigma Male, вывод - ошибка возникает при определении самого высокого элемента.

[TorVik_1]

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