Por que eu recebo uma matriz diferente?

Dia bom. Eu tenho problema em dar diferentes matrizes;

meu código ao lado:

setInterval(function() {

var TestName = [];
var requests = [];
TestName.push('0');
for($i=1; $i<8; $i++) {
    var id = $i;
    requests.push($.post("./Scripts/", {
    record:id,
    opt:'get_test'
    }, function(data){
          TestName.push(data);
    }));
}

 $.when.apply($,requests).done(function(){

     for($i=1; $i<8; $i++) {
$('#test'+$i).html('').html(TestName[$i]);

}
alert(TestName);
 });

}, 15000);

Este código funciona, mas toda vez que eu recebo matrizes diferentes ...

Por exemplo:

alert(TestName); resultar um:

0,
<a href="#"><img src="./images/test1.png"></a>,
<a href="#"><img src="./images/test2.png"></a>,
<a href="#"><img src="./images/test3.png"></a>,
<a href="#"><img src="./images/test4.png"></a>,
<a href="#"><img src="./images/test5.png"></a>,
<a href="TestTestTestTestTest.php"><img src="./1358997710.jpg"></a>,
<a href="#"><img src="./images/test7.png"></a>,

alert(TestName); resultado dois:

0,
<a href="#"><img src="./images/test1.png"></a>,
<a href="#"><img src="./images/test2.png"></a>,
<a href="TestTestTestTestTest.php"><img src="./1358997710.jpg"></a>,
<a href="#"><img src="./images/test3.png"></a>,
<a href="#"><img src="./images/test5.png"></a>,
<a href="#"><img src="./images/test4.png"></a>,
<a href="#"><img src="./images/test7.png"></a>

Como você pode ver elementos da matriz cada vez que a troca se assenta, e às vezes os elementos da matriz são organizados na ordem errada.

Diga-me por favor onde pode ter sido erro no código?

questionAnswers(1)

yourAnswerToTheQuestion