Как зациклить функцию в JQuery длительность и интервал?

Question

[Shakhrom Mukumov]

Есть ли возможность зациклить функции в JQuery.
Задача добавить класс элементу, через "N" секунд удалить ранее добавленный класс и чтобы этот процесс был зацикленный с интервалом "N" секунд. Нашел setInterval и setTimeout только как совместить это в код, или возможно есть варианты по легче/более правильные?

p.s. Я совсем новичок в JS/JQuery, просьба помочь кто может ))) Благодарю.

Answer 1

[Stalker_RED]

var N = 5000; // 5 секунд

setInterval(function(){
  $('#targetBlock').toggleClass('className');
}, N);

Пример: https://jsfiddle.net/1Lg01xmu/

Answer 2

[Дима Паутов]

Страшно представить, для чего вам это!

// Каждые 4 секунды
setInterval(function(){
	
  // Сначала удаляем старый класс, и сразу добавляем нужный
  $('div')
    .removeClass('someClass')
    .addClass('yourClass');

}, 4000);

Если делаете зацикливание анимации, то это делается через css в 2 счёта

Comments

[Shakhrom Mukumov]

Да, вы правы, мне надо зациклить, но чтобы по окончании анимации была задержка, можно такое сделать на чистом CSS?
animation: anim 2s infinite; в данном случае повторяется анимация, а вот с задержкой не разобрался... Знаю что можно сделать задержку перед началом анимации

[Дима Паутов]

animation: 2s anim 2s infinite

[Shakhrom Mukumov]

Дима Турков: первое длительность анимации, второе задержка перед анимацией, так?

[Дима Паутов]

Shakhrom Mukumov: Честно, не помню. Просто посмотрите и поменяйте значение

[Shakhrom Mukumov]

Дима Турков: codepen.io/leon9208/pen/OWjrPj

вот реальный пример, я уже тут всё перелопатил, поэтому первый ответ на вопрос в данном случае не актуальный, ваш ответ использовал для другой функции ))) Вот если следовать вашему примеру (CSS анимация), то задержку можно сделать перед всей анимацией, т.к. у меня infifnte, то нет задержки после каждым повторением...

[Дима Паутов]

Shakhrom Mukumov: Задержку можно имитировать!! Например так:
@keyframes identifier {
0% {
background: rgba(255, 255, 255, 0.3);
}

60% {
background: rgba(255, 255, 255, 1);
}
}

Всё остальное, что осталось - это 40% это и есть задержка

[Shakhrom Mukumov]

Дима Турков: не работает, т.е. from / to изменил на 0% / 60%

[Дима Паутов]

Shakhrom Mukumov: ах да, animation: 2s anim 12s infinite; То 12 секунд это на первую анимацию, остальные потом друг за другом.

[Shakhrom Mukumov]

Дима Турков: т.е. получается чистым CSS не сделать задержку после каждой анимации, только перед первой?

[Shakhrom Mukumov]

Дима Турков: сделал костыль можете посмотреть по то же ссылке ... есть у программистов выражение:
- Не трогай, работает!
)))) Спасибо Вам большое за отклик.