Question

For loop with ajax call after, slow for loop?

  for (var x = this.from; x < this.emax; x++) { this.list.append('<li></li>'); }


  jQuery.ajax({
  .....

Some how, it will start the ajax request at the same time as the for loop. So Chrome
chokes a second. I dont want that, can it be fixed?

Answer 1

From what i’ve seen, browsers typically don’t update the page til the script is done processing the current event. That means that the Ajax request will be started before the new LIs are actually rendered, and both will appear to happen at about the same time.

One workaround for that would be to put the .ajax call inside a setTimeout with a minimal timeout value. A 0 ms timeout might do it; if not, then 1 will. The point is to get the call queued, so the DOM changes are applied before it occurs.

(With that said, though, why are you appending a bunch of empty LIs in the first place? If they’re placeholders for whatever the Ajax request is getting, you might consider letting its success callback add them. Just a thought.)