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

Question

[Kizzeon]

Я знаю что можно используя setInterval задать отсрочку кода на N мс, но если внутри setInterval добавлять класс, а по окончанию убирать класс, то эффекты накладываются и блок вместо обновления класса каждые, например, 5 секунд обновляется каждый раз когда оканчивается setInterval(который накладывается).

Например:

div.classList.add("classTwo");         //базовый код
      div.classList.remove("classOne"); //базовый код

      window.setInterval(function(){
        div.classList.add("classOne");     // По окончанию выполнить этот код
        div.classList.remove("classTwo");  // По окончанию выполнить этот код
      }, 5000);

Как можно при вызове функции выполнить базовый код и спустя n секунд выполнить другой код так, что бы при повторном вызове функции таймер обновлялся?

Comments

[Kovalsky]

У classList есть еще метод toggle, он как раз для этого

Answer 1

[Максим Морев]

setInterval (а также setTimeout) вам отдаёт идентификатор таймера, запомните его и сбрасывайте при повторном вызове, а потом назначайте снова.

var timer;
function switchClasses() {
  div.classList.add("classTwo");
  div.classList.remove("classOne");
  clearTimeout(timer);
  timer = window.setTimeout(() => {
    div.classList.add("classOne");
    div.classList.remove("classTwo");
  }, 5000);
}

Comments

[Александр]

Какова ценность setInterval в этом коде? Может лучше setTimeout использовать?

[Максим Морев]

Александр, вы правы - скопировал из вопроса, не включая голову :) поправил.