Как вызвать функцию с setTimiout с помощью setInterval?

Question

[1codeman1]

Добрый день, подскажите пожалуйста как мне реализовать такой функционал. Как заходишь на страницу через 5 секунд вызывается функция которая добавляет елементу клас на 4 секунды а затем его удаляет и потом вызывается через каждые 2 минуты.
Мой код

function anim() {
            let random = getRandomInt(3)
            element[random].classList.add('hover')
            setTimeout(function () {
                element[random].classList.remove("hover");
            }, 4000);
        }

        setInterval(function () {
            anim()
        }, 5000);

Заранее спасибо

Answer 1

[G F]

Используй requestAnimationFrame
https://developer.mozilla.org/ru/docs/DOM/window.r...
https://learn.javascript.ru/js-animation

Comments

[G F]

1codeman1, просто у браузера есть оптимизации для requestAnimationFrame, в отличие от сеттаймаута. Но если вам для какой-нибудь мелочи то и тайм-аут сойдёт, хотя лучше сразу привыкать нормально делать.

[1codeman1]

G F, Понял, спасибо. Сейчас попробую по норм сделать

[1codeman1]

G F, подскажи пожалуйста как можно правильно переписать мой код с помощью requestAnimationFrame?

[G F]

1codeman1, не могу так сразу сказать, у тебя тут вложенные тайм-ауты, а я сейчас не за компом чтобы руками потрогать

[Дмитрий Беляев]

G F, не вводите людей в заблуждение и сами разберитесь в вопросе, прежде чем что-то отвечать. У браузера нет никаких "особых" оптимизаций для requestAnimationFrame. Он просто вызывается в другом месте event loop, непосредственно перед ререндером. А таймеры выполняются как обычное событие. Все. Задачу "отложить выполнение на N секунд" requestAnimationFrame никак не решает в принципе, он для этого не предназначен, в отличии от таймеров.

Answer 2

[Данил Самусев]

function sleep(ms) {
	return new Promise(resolve => setTimeout(resolve, ms));
}

setInterval(async () => {
let random = getRandomInt(3)
element[random].classList.add('hover')
await sleep(4000);
element[random].classList.remove("hover");
}, 5000);