Chrome browser "hangs" while executing AJAX requests in loop

Question

Chrome browser doesn't refresh after each AJAX, it only refreshes when loop end executing all AJAX requests. In Firefox it works correctly, in Chrome debugger also (step by step). I also added timeout, but it doesn't help. Ajax calls are synchronized. Change to asynchronous doesn't make diffrence.

$("#doAllTest").click(function () {
  $(".doTest").each(function () {
    $(this).trigger('click');
  })
});

One of my Ajax Calls:

$("#ut2").click(function () {
    var user_id = logIn("user","user");
        $.ajax({
            type: 'POST',
            url: "/ScrummyPro/src/forms/card/includes/windows.php",
            async: false,
            data: {
                window: "update_sp",
                burned_stp: "1",
                card_id: "409"
            },
            success: function (result) {
                var msg = jQuery.parseJSON(result);
                if (msg) {
                    $("#ut2result").text("Success - Server response: " + msg);
                    $("#ut2result").attr("class", "successful");

                } else {
                    $("#ut2result").text("Operation failed - Server response: " + result);
                    $("#ut2result").attr("class", "failed");                     
                }
                  //the change (in if statement) appears after looping.
            },
            error: function (result) {
                $("#ut2result").text("Ajax Error").attr("class", "failed");              
            }
        });

        importer(2);
});

The DOM change in if statement (when success) appears after looping.

In debug mode i can see that class "successful" is added, but i can't see effects of it. It appears after looping.

$(this).trigger('click'); - initiates AJAX calls, i call a lots of AJAX calls. I can add one. — karolinski, May 11 '16 at 09:24
That's strange. I had a similra problem, but that happens in every browser because of session lock. Give it a shot: http://stackoverflow.com/questions/36056749/post-call-from-a-loop — vaso123, May 11 '16 at 11:00

karolinski · Accepted Answer · 2023-07-19T21:18:33.990

.each function blocks chrome browser, so I changed the loop to this:

var i = 0;
var array = document.getElementsByClassName("doTest");

function execute() {
    var dothis = function ()
    {
        try {
            $(array[i]).trigger('click');
        } catch (err) {
              clearInterval(x); 
        }
        if (i == array.length) {
            clearInterval(x);
        }
        i++;
    };
    var x = setInterval(dothis, 1);
}

$("#doAllTest").click(function () {
    execute();
});

Chrome browser "hangs" while executing AJAX requests in loop

1 Answers1