use setTimeout in a for loop [duplicate]

Here you go:

var square = document.getElementById('square');

for (var i = 0; i <= 3; i++) {
    setTimeout(function() {
        square.style.left = i * 100 + 'px';
    }, i * 1000);
}

UPDATE (now using a closure)

http://jsfiddle.net/c03hf5t5/

var square = document.getElementById('square');

for (var i = 0; i <= 3; i++) {
    setTimeout(setLeft(square, i * 100), i * 1000);
}

function setLeft(element, offset) {
  return function() {
    element.style.left = offset + 'px';
  };
}

This should work for you. I think the loop will not wait for setTimeout, that was your problem.

var square = document.getElementById('square');

function changeLeftPos(i, elem) {
    setTimeout(function() {
        elem.style.left = i * 100 + 'px';
    }, i * 1000);
}

for (var i = 0; i <= 3; i++) {
    changeLeftPos(i, square);
}

The reason dhouty's solution doesnt work is because loops have issues carrying incremented values inside asynchronous functions.

var square = document.getElementById('square');
for (var i = 0; i <= 3; i++) {
    (function(i){
        setTimeout(function() {
            square.style.left = i * 100 + 'px';
        }, i * 1000);
    })(i);
}

var square = document.getElementById('square');
var i=0;
function example()
{
    square.style.left = i * 100 + 'px';
    if (i < 3){
        i++;
        setTimeout(example, 1000);
    }
}
setTimeout(example, 1000);

    var v = [0, 100, 200, 300], c;
    for (ct = 0; ct <= v.length - 1; ct++) {
        setTimeout(
            function () {
                var vl = ct;
                (function () {
                    document.getElementById("square").style.left = vl + "px"
                }())
            }
        )
    }

It is because the anonymous function supplied to setTimeout will be run after the for loop, regardless of the time specified.

At this point the variable of i that the function looks at is the current variable of i at the end of the loop, as the setTimeout function executes after the loop.

A for loop doesn't create a closure as there is no blocked scope in javascript. To fix your problem you will need this (or something to similar effect):

for (i = 0; i <=300; i=i+100) {
       j = i*10;
    (function(val) {
    setTimeout(
      function (val){
         document.getElementById("square").style.left=val+"px";
    }, j))(i);

};

The function here introduces a closure which means that the value of i will refer to the current value of i rather than what it will be after the loop has run.