0

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?

user1158040
  • 47
  • 1
  • 7
  • 4
    how did you come to the conclusion that it happens at the same time? – AMember Oct 10 '12 at 13:51
  • Unless js has somehow become multi-threaded I don't see how this is possible. The only thing that springs to mind but I have no idea if it applies in any way to browsers, is that when your browser goes to render the changes to the dom (in this case the li elements) the inspector showing the ajax request going through may be interfering. The for loop will always execute first though. – Jon Taylor Oct 10 '12 at 13:55
  • not for your question per say, but check out http://stackoverflow.com/questions/4549894/how-can-i-repeat-strings-in-javascript you can create the string of LIs and append it all in one go, might be faster. – Pyro979 Oct 10 '12 at 14:03

2 Answers2

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.)

cHao
  • 84,970
  • 20
  • 145
  • 172
  • I tried it, but because I have multiple ul´s were the li is applied, somehow it skips the first object in the call. `obj = this; setTimeout(function(){ jQuery.ajax({`.... I guess the variable obj will be filled with the next object that goes through the method. So the timeout will skip the first call. – user1158040 Oct 11 '12 at 07:59
  • 1
    In cases like that, you can use an IIFE to split off `obj`'s scope. Something like `var callback = (function(obj) { return function() { jQuery.ajax(...); }; })(this);`. Then `callback` will have its own `obj` rather than inheriting the scope of the other one, and you can pass the callback easily to `setTimeout` -- or just call it directly, if your problem was the confusion over what `obj` is. :) – cHao Oct 11 '12 at 12:57
  • Wow, good! Seems to work perfekt! Thank you so much, have been strugling with this for a while. Great code. – user1158040 Oct 12 '12 at 08:21
1

May be this is work ı am not sure :

for (var x = this.from; x < this.emax; x++) { this.list.append('<li>
</li>').slow(200,function() {
     jQuery.ajax({

      .........
}); }
zugurtaga
  • 21
  • 5
  • This runs the `.ajax` stuff for each LI, doesn't it? That's not what the original code does... – cHao Oct 10 '12 at 14:07