Tengo este código de Javascript, que funciona como se esperaba:

<div class="test"></div>

<script>
setTimeout(function(){$(".test").append("test1")},1000);
setTimeout(function(){$(".test").append("test2")},2000);
</script>
<script src="js/jquery.min.js"></script>

Muestra "test1" primero y luego "test2" un segundo después, como tal: "test1test2", que es lo que quiero.

Cuando intento hacer esto en un bucle FOR, así:

var timeInterval = 1000;
for (var i = 0, l = 2; i < l; i++ ) {
    setTimeout(function(){$(".test").append("test" + i)},timeInterval);
    timeInterval += 1000;
}

Luego obtengo "test2" primero y luego "test2" un segundo después, como tal: "test2test2", que no es lo que quiero.

De hecho, si l = 3, obtengo "test3test3test3" en lugar de "test1test2test3". ¿Alguien sabe como resolver este problema?