setTimeout inside setInterval does not work well

Question

My code should change the class of the item in every second and repeat it forever.

function myFunction() {
 setInterval(function() {
    $("#item").addClass("class-one").removeClass("class-two");
    setTimeout(function(){
      $("#item").addClass("class-two").removeClass("class-one");
    }, 1000);
  },1000);
}

myFunction();

First time the code works well, but after the loop starts again, it starts switching very fast. Can anybody tell me why?

Answer 1

1. The interval starts
2. 1 second later the interval resolves:

• classes are switched over
• the timeout is triggered

3. 1 second later:
   • The timeout resolves
     • classes are switched over
   • The interval resolves
     • classes are switched over
     • the timeout is triggered

You probably want the timeout time to be half the interval time, not the same as it.

---

A better approach entirely would be to use one class and use jQuery().toggle to toggle it on and off every second (using one interval and no timeouts).

Answer 2

correct way:

var i = 0;
function myFunction() {
  setInterval(function() {
    if(i % 2 == 0) {
      $("#item").addClass("class-one").removeClass("class-two");
    } else {
      $("#item").addClass("class-two").removeClass("class-one");
    }
    i++;
  },1000);
}

myFunction();

or with your solution: ( increase 1 second of setInterval time )

function myFunction() {
 setInterval(function() {
    $("#item").addClass("class-one").removeClass("class-two");
    setTimeout(function(){
      $("#item").addClass("class-two").removeClass("class-one");
    }, 1000);
  },2000);
}

myFunction();