@bett22

Как сделать таймер для карточек товара?

Есть таймер для карточек товара . Подскажите как сделать так, что-бы у каждой карточки можно было указывать свое значение таймера? для каждой карточки как-то странно писать новый код, ведь их может быть много. Спасибо
  • Вопрос задан
  • 162 просмотра
Пригласить эксперта
Ответы на вопрос 1
Stalker_RED
@Stalker_RED
Если нашел этот код в интернетах - выбрось без сожаления, и возьми нормальный.
Если написал сам, то можно доработать:
1. вместо document.querySelectorAll('.time-count__days...
можно найти нужный контейнер со счетчиком, а потом искать разметку таймера уже в нем
const card = document.querySelector('#селектор_карточки_товара');
const days = card.querySelector('.time-count__days');
Причем можно это делать один раз при инициализации скрипта, и не дергать DOM много раз каждую секунду.

2. прописывать в каждой карточке разметку для секунд и минут - так себе идея. Можно вставлять ее скриптом. Заодно и не нужно будет ее искать.

3. пропишите в CSS жестко размеры для элементов таймера, чтобы браузер не пытался делать reflow при изменении текста в них. Если нужна резиновость - можно привязать размеры к vh vw или пересчитывать их по событию resize.

4. setInterval(foo, 1000) - плохо.
setInterval не обещает, что код в следующий раз запустится через 1000ms, он обещает что он запустится НЕ РАНЬШЕ, чем через 1000ms. То есть при наличии на странице каких-то тяжелых скриптов таймер может пропускать тики. Хорошо хоть вычсление t у вас не просто счетом, а сравнением с new Date()
Можно обновлять по requestAnimationFrame. Естественно не каждый кадр, а только когда изменились секунды.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы