VKUI
VKUI copied to clipboard
VKCOM
[Bug]: Gallery, неверная работа looped с timeout при их одновременном использовании
Описание
Если использовать параметр looped в связке с timeout то если переключить вкладку в браузере а потом вернуться назад то начинают отрабатывать все таймауты (автосмены) которые должны были произойти за это время
-На скриншоте то как мы используем галерею -На видео работа карусели при возвращении на вкладку через 3 минуты
UPD: после фикса https://github.com/VKCOM/VKUI/pull/5954 создали ещё задачу уже о версии v5.10.0.
Постоянно стал воспоизводиться баг что Gallery в режиме looped с timeout
<Gallery slideWidth="95%" align="center" timeout={15000} isDraggable looped showArrows>
при возвращении на давно открытую вкладку (порядка минут 5) начинает подряд переключать слайды
Шаги воспроизведения
Создать галерею <Gallery slideWidth="95%" align="center" timeout={15000} isDraggable looped showArrows>
и добавить в неё более 2 слайдов
Ожидаемое поведение
При возвращении нет быстрой прокрутки галереи и тамер для автопереключения слайдов запускается заново на текущем слайде
Скриншоты
https://github.com/VKCOM/VKUI/assets/39019501/d9e631c9-813e-4458-b6e8-220faddb3c22
Версия
5.9.1, v5.10.0
В каких браузерах воспроизводится проблема?
Chrome, Firefox
Шаги воспроизведения
- использовать Gallery с параметрами looped и timeout (например timeout={3000})
- открыть страницу с галереей (пока мы на ней все работает исправно)
- переключить вкладку и подождать больше 3 секунд (значения в таймауте, для наглядности в несколько раз)
- переключиться обратно на вкладку
или
Создать галерею <Gallery slideWidth="95%" align="center" timeout={15000} isDraggable looped showArrows>
и добавить в неё более 2 слайдов
Видим что галерея начинает подряд переключать слайды столько раз, сколько должно было быть переключений за время отсутствия на вкладке
Ожидаемое поведение
При возвращении нет быстрой прокрутки галереи и тамер для автопереключения слайдов запускается заново на текущем слайде
Скриншоты
https://github.com/VKCOM/VKUI/assets/39019501/2a2cebcd-7b68-43dd-8d17-b80ace94ca73
Пример с воспроизведением
No response
Стоит посмотреть на реализацию таймаута на основе requestAnimationFrame и дельты между двумя измерениями perfomance.now() - даже после переключения между вкладками получится получать всегда актуально значение прошедшего времени
