Как показать/спрятать блок каждые 5 сек и одновременно менять информацию в блоке?

Question

[malayamarisha]

Доброго времени суток!
Подскажите, пожалуйста, как каждые 5 сек выводить блок и в блоке подставлять title из массива объектов. По прошествии 5 секунд прятать блок. После 5 секунд снова показывать блок, но с выводом след элемента.

<div class="modals">
    <div class="modal">
        <p>На сайте только что купили</p>
        <p class="modal__title"></p> // здесь выводить title из массива объектов
    </div>
</div>

const titleModal = document.querySelector('.modal__title');
const modalWindow = document.querySelector('.modal');
const infoModal = [
    {
        title: 'Заголовок 1',
    },
    {
        title: 'Заголовок  2',
    },
    {
        title: 'Заголовок  3',
    },
    {
        title: 'Заголовок  4',
    },
];

function changeTitle(infoModal) {
    modalWindow.classList.remove('_active');
    infoModal.forEach((el, i) => {
        setTimeout(() => {
            modalWindow.classList.add('_active');
            titleModal.innerHTML = el.title;
        }, (i + 1) * 5000);
        clearTimeout();
        modalWindow.classList.remove('_active');
    });
}
setTimeout(changeTitle, 5000, infoModal);

На данный момент блок появляется на странице через 5 сек и в нем каждые 5 сек выводится title.
Теперь нужно после появления блока через 5 секунд скрывать блок, далее через 5 сек показывать блок, но уже с "Заголовок 2", снова скрывать блок, после 5 сек показывать блок с "Заголовок 3".

Answer 1

[0xD34F]

let index = -1;

setInterval(el => {
  const show = !el.classList.contains('_active');
  index = (index + show) % infoModal.length;
  el.innerText = infoModal[index].title;
  el.classList.toggle('_active', show);
}, 1000, document.querySelector('.modal__title'));

UPD. Вынесено из комментариев:

Если, к примеру, нужно скрывать блок каждый раз через5 сек, а показывать блок через рандомный промежуток времени?

К чёрту setInterval, делаете функцию, которая вызывает себя по таймауту - случайному при скрытии элемента и фиксированному при показе:

(function updateText(el, i) {
  const show = el.classList.toggle('_active');
  i = (i + show) % infoModal.length;
  el.textContent = infoModal[i].title;
  setTimeout(updateText, 1000 + !show * Math.random() * 3000, el, i);
})(document.querySelector('.modal__title'), -1);

Comments

[malayamarisha]

Спасибо большое, то что нужно

Немного скорректирован по добавлению/удалению класса _active для modal

let index = -1;
setInterval((el) => {
    const show = !modalWindow.classList.contains('_active'); // true/ false
    index = (index + show) % infoModal.length;
    el.innerText = infoModal[index].title;
    modalWindow.classList.toggle('_active', show);
}, 5000, document.querySelector('.modal__title'));

Если, к примеру, нужно скрывать блок каждый раз через5 сек, а показывать блок через рандомный промежуток времени?

[0xD34F]

А сразу вопрос полностью задать - нет, никак? Или, может, самостоятельно подумать?

Дополнил ответ.

[malayamarisha]

0xD34F, в любом случае спасибо большое, буду думать )