The setTimeout() function is non-blocking and will return immediately. Therefore your loop will iterate very quickly and it will initiate 3-second timeout triggers one after the other in quick succession. That is why your first alerts pops up after 3 seconds, and all the rest follow in succession without any delay.

You may want to use something like this instead:

var i = 1;                  //  set your counter to 1

function myLoop() {         //  create a loop function
  setTimeout(function() {   //  call a 3s setTimeout when the loop is called
    console.log('hello');   //  your code here
    i++;                    //  increment the counter
    if (i < 10) {           //  if the counter < 10, call the loop function
      myLoop();             //  ..  again which will trigger another 
    }                       //  ..  setTimeout()
  }, 3000)
}

myLoop();                   //  start the loop

You could also neaten it up, by using a self invoking function, passing the number of iterations as an argument:

(function myLoop(i) {
  setTimeout(function() {
    console.log('hello'); //  your code here                
    if (--i) myLoop(i);   //  decrement i and call myLoop again if i > 0
  }, 3000)
})(10);                   //  pass the number of iterations as an argument

This works:

var on = true,
    sw = document.getElementById("switch"),
    stop, y = 0,
    dir, to;

function animate() {
    sw.style.backgroundPosition = y + 'px 0px';
    y += dir;
    if (y != stop) {
        to = setTimeout(animate,25);
    }
}

function toggle() {
    if (to) {
        clearTimeout(to);
    }
    if (on) {
        dir = -1;
        stop = -38;
    }
    else {
        dir = 1;
        stop = 2;

    }
    to = setTimeout(animate, 25);
    on = !on;
}

DEMO

Don't know if it is the best way though.

Note: You either have to run the code in the body.onload event handler or put it at the bottom of the page.

You can also try to play with the step size and the timeout time.... there was something else I wanted to say, but I forgot ;)

Another note: You should always use expressive variable names. E.g. It was not clear that x is used as a boolean indicator (at least not if you only have a quick lock at it).

setTimeout does not pause; it asks Javascript to run some other code later.

Googling for "setTimeout loop" tells you exactly what you need to know. If you look around a little bit, it even mentions setInterval. The difference: using setTimeout to loop will wait 3 seconds in between loops, whereas setInterval will make it take 3 seconds total for the loop (including however much time the animation takes, as long as it's less than 3 seconds :) ). Also, setInterval constructs an infinite loop that you'll have to break out of after the desired number of times; setTimeout requires you to construct the loop yourself.

i = 0;

// setTimeout approach
function animation_loop() {
  someAnimation();
  setTimeout(function() {
    i++;
    if (i < n) {
      animation_loop();
    }
  }, 3000);
};
animation_loop();

// setInterval approach
i = 0;
someAnimation();
iid = setInterval(function() {
  i++;
  if (i < n) {
    someAnimation();
  } else {
    clearInterval(iid);
  }
}, 3000);

You'll have to go that way:

function jsHello(i) {
    if (i < 0) return;

    setTimeout(function () {

        alert("Hello " + i);

        jsHello(--i);

    }, 2000);
}

jsHello(5);

or

function jsHello(i) {
    alert("Hello " + i);

    if (--i > -1) {
      setTimeout(function () { jsHello(i); }, 2000);
    }
}

jsHello(5);