AJAX call freezes browser for a bit while it gets response and executes success

Question

I am doing an AJAX call to my webserver which fetches a lot of data. i show a loading image that spins while the ajax call is executed and then fades away.

the thin

Answer 1

Since JavaScript is single threaded, a lot of sync processing will hang up the event queue and prevent other code from executing. In your case, it's the for-loop thats locking up the browser while it's executing.

What you can try is putting all your iterations into your event queue.

for (var i = 0 ; i < childNodes.length ; i = i + 1) {
    (function(i) {
        setTimeout(function(i) {
            // code-here
        }, 0)
    })(i)
}

This should space out the processing and not force the browser to finish them all at once. The self executing function is there to create a closure to hold on to the value of the loop counter i.