setTimeout not executed in loop(each)

Question

See the function below:

$(grupo).each(function (i) {
    setTimeout(function () {
        $.ajax({
            url: "curltst.php",
            data: {
                acao: "teste",
                mensagem: mensagem,
                grupo: grupo[i]
            },
            dataType: "xml",
            method: "POST",
            success: function (data) {
                grupo = $(data).find("tdgrupo").text();
                status = $(data).find("tdstatus").text();
                $("tbody").append("
<tr>
    <td>" + grupo + "</td>
    <td>" + status + "</td>
</tr>");
            },
            error: function () {
                alert("ERRO 008");
            }
        });
    }, 10000);
});

Anyway, group is an array with about 5 groups.

The idea is that each time you go through the array(group[0],group[1]..) has a 10-second interval, but what happens is different, it waits 10 seconds to start, but sends all AJAX requests, that is, it waits 10 seconds, and then go through the whole array and send ajax, it’s as if from the second time the setTimeout were ignored..

In my thought, I should wait 10 seconds (10000ms) and then send ajax, then go to the next input of the array(group), wait 10 and go ajax, and so on until I go through completely..

Answer 1

Contrary to what you’re thinking, the whole loop of each occurs immediately. Only what is within the "delayed" wheel setTimeout, asynchronously (as if it were "parallel"). Inside the loop, your code doesn’t stop for 10 seconds.

The quickest fix is to use 10000 * i in the setting of timers. This delays each one by 10 seconds from the previous one. It’s not very accurate, but in your case there doesn’t seem to be any need for more than that.

---

Another solution a little more elegant (but you can still improve):

$(grupo).each(function (i) {
    $.ajax({
        url: "curltst.php",
        data: {
            acao: "teste",
            mensagem: mensagem,
            grupo: grupo[i]
        },
        dataType: "xml",
        method: "POST",
        success: function (data) {
            setTimeout(function () {
                var grupo = $(data).find("tdgrupo").text();
                var status = $(data).find("tdstatus").text();
                $("tbody").append("<tr><td>" + grupo + "</td><td>" + status + "</td></tr>");
            }, 10000 * i);
        },
        error: function () {
            alert("ERRO 008");
        }
    });
});

Important: this solution executes all ajax calls immediately, and only delays the DOM change (the append in your table with the result of each request).

Answer 2

Knowing @bfavaretto I know that he used a didactic way to solve the problem and explain in a simple way how JS works. I will try to be a little more technical here I directly answer the question of the user @Alexandre C.Caus.

Javascript runs on only one thread, but functions as setTimeout will be executed late without stopping the execution of the function that executed the call. That is, the loop will be fully executed and the setTimeout shall be lined up after the execution, awaiting the time of the point at which they were called.

For a code to be called after 10 seconds in sequence, the setTimeout should be "within" of the execution of the previous.

Because this process generates many functions within each other, the code can get very messy, to simplify a little the answer I will employ the use of jQuery’s own promises, to simplify the code:

var promisse;
var waitFor = 10e3; // 10 segundos
$(grupo).each(function(i){
    function ajaxCall(i) {
        return $.ajax({
            url: "curltst.php",
            data: {
                acao: "teste",
                mensagem: mensagem,
                grupo: grupo[i]
            },
            dataType: "xml",
            method: "POST",
            success: function (data) {
                grupo = $(data).find("tdgrupo").text();
                status = $(data).find("tdstatus").text();
                $("tbody").append("
                <tr>
                    <td>" + grupo + "</td>
                    <td>" + status + "</td>
                </tr>");
                },
            error: function () {
                alert("ERRO 008");
            }
        });
    }

    // Na primeira requisição use a promessa diretamente do retorno do
    // método ajax, isso vai fazer com que a primeira requisição seja
    // instantânea.
    if(!promisse) promisse = ajaxCall(i);
    // Caso já seja uma promessa, a função de callback vai ser chamada
    else promise.then(function(){
        // Definimos a deferencia da promessa que irá aguardar o tempo
        // desejado aqui, e já retornamos a nossa sequencia de promessas
        // antes dela ser resolvida, assim o loop segue fazendo o mesmo
        // até chegar ao fim.
        var deferred = $.deferred();
        // Isso será executado apenas quando a promessa anterior for resolvida
        // isso é, você tem o resultado da sua ultima requisição ajax e
        // agora vai esperar o tempo necessário pra proxima requisição
        setTimeout(function(){
            // Passado tempo, agora vamos fazer a nova requisição
            // e vamos fazer uma ponte do resultado da requisição a nossa
            // promessa, assim o proximo só começa ser executado quando
            // a resposta chegar
            ajaxCall(i).done(deferred.resolve).fail(deferred.fail);
        }, waitFor);
        return deferred.promise();
    });
});

How would the execution flow of this code:

• variable for promises is defined in scope
• Loop is started
  • check if there are promises, or do the prepares the request and save promise (the request will be executed later), goes to the next loop result;
  • if there’s promise, prepares setTimeout to return a promise that contains the AJAX request and puts it in the promise queue, then goes to the next loop result;
• Finished the loop;
• First AJAX request executed, when return;
• Initiating setTimeout 10 seconds, when finished;
• Start next AJAX request, and when finished, repeat the process of the previous step until all promises are resolved;