Как решить ошибку Uncaught RangeError: Invalid array length при ресайзе?

Question

[webl2m]

Comments

[Lynn «Кофеман»]

Вы удаляете элемент из DOM и его ширина становится 0.

Использование innerHTML это практически всегда плохая идея.

[webl2m]

Lynn «Кофеман», а что лучше использовать тогда?

[Kentavr16]

Lynn «Кофеман», глянь по возможности мой ответ. Нет ли на такие случаи подходящего слушателя? что-то вроде domContentLoaded.но при отрисовке вставленных элементов/контента после ресайза. Ощущение что все это изобретание велосипеда. Самому интересно, чаще пишу в реакте где подобных проблем нет.

[Lynn «Кофеман»]

Kentavr16,

> Я так понимаю DOM не успевает перерисоваться после втыкивания в него элементов через иннер хтмл

неправильно.

После marqueeWrap.innerHTML = "..."; оригинальный элемент сохранённый в marqueeContent удаляется из DOM и у него уже в принципе нет никаких размеров.

[Lynn «Кофеман»]

webl2m,
document.createElement

И если это просто текст, то проще внутренности marquee склонировать

Answer 1

[Kentavr16]

webl2m, я вижу два решения. Первое - добавь отсрочку перед выполнением скрипта. Я так понимаю DOM не успевает перерисоваться после втыкивания в него элементов через иннер хтмл, потому в Math.ceil(marqueeWidth / marqueeContentWidth) ты делил на ноль.

if(!marqueeContentWidth) {
            setTimeout(()=>{
                const duplicatedItems = Array.from(
                    { length: itemsNeeded },
                    () => originalContent
                  ).join('')
              
                  marqueeWrap.innerHTML = duplicatedItems
            },100)
        }

Второй вариант - удалить window.addEventListener('resize', duplicateItems). В чем его назначение? И так при ресайзе будет нормальная прокрутка. Или я недопонял что-то?
И да - добавь

.marquee {
  padding: 5px 0;
  background-color: #000;
  color: #fff;
  overflow: hidden; /* вот это вот */
}

Еще можно промис написать который будет резолв если элемент отрисован.
Может есть и другие решения - я нашел такие топорные.

Comments

[Kentavr16]

Наверное по уму использовать mutation observer для родителя этих спанов, но это выглядит уже слишком для такого простого функционала.

[webl2m]

Kentavr16, если на каком-нибудь условном айфоне 14 повернуть экран. То элементов на всю ширину может не хватить и получится вот это:

Поэтому думал решить это ресайзом. Хотя на самом деле можно в itemsNeeded плюсануть один лишний дубликат и перекрыть эту нехватку. Сейчас попробую переписать на document.createElement как Lynn «Кофеман» подсказал. Если не получится, так и сделаю ) Спасибо за ответ