force queue in .each() (javascript)

Question

How can synchrony be forced in a javascript loop?

This is without synchrony :

$.each(data, function(index, value) { 
  alert(index + ': ' + value); 
});

synchrony attempt :

var time = 500;
$.each(data, function(index, value) { 
  setTimeout(alert(index + ': ' + value), time);
  time += 500;
});

but so far all it does is run the alert in a row, without interval

This is the ajax request that I need to run in a QUEUE :

        $.each(data, function(key, val) {

            $.ajax({      
            url: 'ajax/getPerson.php', 
            type:'post',
            dataType: 'json',
            data: { 'dude' : val["idG"] },
            success: function(data) { createHTML.person(data) }
        }

`forEach` *is synchronous* as all javascript is. Why would you think it was not? — Bergi, Oct 21 '12 at 13:31
I am using this function to make a DataBase Requests and they are not coming back in the order I ask for — coiso, Oct 21 '12 at 13:35
So I thought setting small intervals might help, but If there is a better way I'd love to hear about it — coiso, Oct 21 '12 at 13:36
You use `synchrony` wrong. What do you think it means? check Wikipedia... — gdoron, Oct 21 '12 at 13:37
Found a good answer on a similar issue: http://stackoverflow.com/a/4797596/1064717 — coiso, Oct 21 '12 at 13:53

score 2 · Answer 1 · answered Oct 21 '12 at 13:30

2

Try this:

var time = 500;
$.each(data, function(index, value) { 
  setTimeout(function() {
     alert(index + ': ' + value);
  }, time);
  time += 500;
});

answered Oct 21 '12 at 13:30

dfsq

191,768
25
236
258

+1 we both came to same solution :-) – Nelson Oct 21 '12 at 13:36
A little tidier: `setTimeout(..., (index+1) * time);`? – Paul Fleming Oct 21 '12 at 13:49

score 1 · Answer 2 · answered Oct 21 '12 at 13:30

1

Pass the code you want to execute in a function() object as first argument to setTimeout(), like so:

var time = 500;
$.each(data, function(index, value) { 
  setTimeout(function() { alert(index + ': ' + value) }, time);
  time += 500;
});

answered Oct 21 '12 at 13:30

Nelson

49,283
8
68
81

A little tidier: `setTimeout(..., (index+1) * time);`? – Paul Fleming Oct 21 '12 at 13:49

score 1 · Answer 3 · answered Oct 21 '12 at 14:57

According to your comment:

I am using this function to make a DataBase Requests and they are not coming back in the order I ask for

The callback method is intuitive and rather easier to implement, but what if you have 100 request to be made? Assuming 200ms per response-time that's total of 20 second.

So here is the question: Do you really care about the returning order of AJAX calls or you just have to process the returning data by the order of calls you have fired?

If the answer is latter, the solution will be:

fire all ajax calls at once ( or in queue )
maintain an array of returning datas
check array whether all requests have been successfully returned, re-request if there's an error ( or other error handling mechanism)
when all requests are returned, do the data processing you originally intended

force queue in .each() (javascript)

3 Answers3