Счетчик JS, не переключает класс каждые 1 с

Question

Счетчик не работает должным образом. Я хотел бы получить результат, когда функция counterFun переключает класс .active и показывает число в каждой единице. На данный момент класс переключается, но показывает каждое 2-е число и не похоже, что это происходит каждые 1сек

let clickNumber = 0;
const time = 1000;
const h1 = document.querySelector('h1');



function counterFun() {
    clickNumber++;
    h1.textContent = clickNumber;
    h1.classList.toggle('active');

    console.log(clickNumber);
}
setInterval(counterFun, time);

.regular {
  opacity: 0;
}

 .active {
   font-size: 100px;
   opacity: 1;
   transition: .4s;
}

HTML
<div>
    <h1 class="regular active">0</h1>
</div>

Answer 1

Поскольку вам нужно удалить и добавить класс одновременно, вы можете использовать этот код

let clickNumber = 0;
const time = 1000;
const h1 = document.querySelector('h1');



function counterFun() {

    $("#demo").addClass("active").delay(800).queue(function(next){
        $(this).removeClass("active");
        clickNumber++;
        h1.textContent = clickNumber;
        next();
    });

    console.log(clickNumber);
}
setInterval(counterFun, time);

.regular {
  opacity: 0;
}

 .active {
   font-size: 100px;
   opacity: 1;
   transition-delay: .4s;
   transition: .4s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1 class="regular active" id="demo">0</h1>
 </div>

PS: вам нужен jquery

Answer 2

Ваша проблема в том, что вы используете .toggle, который не переключается снова до второй итерации. Так что в итоге вы получите:

0 - переключение 1 - выкл 2 - переключатель 3 - выкл

Вы можете либо использовать .remove и .add для класса, либо добавить второй .toggle.

Пример с удалением:

let clickNumber = 0;
const time = 1000;
const h1 = document.querySelector('h1');



function counterFun() {
   h1.classList.remove('active');
    clickNumber++;
    h1.textContent = clickNumber;
    h1.classList.add('active');
    console.log(clickNumber);
}
setInterval(counterFun, time);

.regular {
  opacity: 0;
}

 .active {
   font-size: 100px;
   opacity: 1;
   transition: .4s;
}

HTML
<div>
    <h1 class="regular active">0</h1>
</div>

Пример с переключателем:

let clickNumber = 0;
const time = 1000;
const h1 = document.querySelector('h1');



function counterFun() {
    h1.classList.toggle('active');
    clickNumber++;
    h1.textContent = clickNumber;
    h1.classList.toggle('active');
    console.log(clickNumber);
}
setInterval(counterFun, time);

.regular {
  opacity: 0;
}

 .active {
   font-size: 100px;
   opacity: 1;
   transition: .4s;
}

HTML
<div>
    <h1 class="regular active">0</h1>
</div>