Как решить ошибку Uncaught RangeError: Invalid array length при ресайзе?
snippet
Дополнительно:
Вы удаляете элемент из DOM и его ширина становится 0.
Использование innerHTML это практически всегда плохая идея.
> Я так понимаю DOM не успевает перерисоваться после втыкивания в него элементов через иннер хтмл
неправильно.
После marqueeWrap.innerHTML = "..."; оригинальный элемент сохранённый в marqueeContent удаляется из DOM и у него уже в принципе нет никаких размеров.
document.createElement
И если это просто текст, то проще внутренности marquee склонировать
Ответы:
webl2m, я вижу два решения. Первое - добавь отсрочку перед выполнением скрипта. Я так понимаю DOM не успевает перерисоваться после втыкивания в него элементов через иннер хтмл, потому в Math.ceil(marqueeWidth / marqueeContentWidth) ты делил на ноль.
if(!marqueeContentWidth) { setTimeout(()=>{ const duplicatedItems = Array.from( { length: itemsNeeded }, () => originalContent ).join('') marqueeWrap.innerHTML = duplicatedItems },100) } |
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; /* вот это вот */ } |
.marquee { padding: 5px 0; background-color: #000; color: #fff; overflow: hidden; /* вот это вот */ }
Еще можно промис написать который будет резолв если элемент отрисован.
Может есть и другие решения - я нашел такие топорные.
- Наверное по уму использовать mutation observer для родителя этих спанов, но это выглядит уже слишком для такого простого функционала.
- Kentavr16, если на каком-нибудь условном айфоне 14 повернуть экран. То элементов на всю ширину может не хватить и получится вот это:
Поэтому думал решить это ресайзом. Хотя на самом деле можно в itemsNeeded плюсануть один лишний дубликат и перекрыть эту нехватку. Сейчас попробую переписать на document.createElement как Lynn «Кофеман» подсказал. Если не получится, так и сделаю ) Спасибо за ответ
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы решить ошибку Uncaught RangeError: Invalid array length при ресайзе, необходимо понять, что она означает и как можно исправить её.
Эта ошибка возникает, когда пытаетесь создать массив с недопустимой длиной. В JavaScript максимальная длина массива ограничена 2^32-1 элементами, и попытка создать массив с большей длиной приведет к возникновению данной ошибки.
Для решения этой проблемы, вам необходимо пересмотреть код, который пытается создать массив с очень большой длиной. Возможно, вам стоит пересмотреть алгоритм или логику вашего приложения, чтобы избежать создания массивов с такой огромной длиной.
Пример исправления ошибки:
// Плохой пример let arr = new Array(9999999999); // Попытка создать массив с огромной длиной // Хороший пример let arr = new Array(); // Создаем пустой массив for (let i = 0; i < 1000; i++) { arr.push(i); // Добавляем элементы по одному }
Исправление ошибки заключается в том, чтобы создавать массивы с разумной длиной и избегать создания массивов с огромным количеством элементов. Таким образом, вы сможете избежать ошибки Uncaught RangeError: Invalid array length при ресайзе.