I have a jQuery Ajax function that requests data from the server.
The code finds all spans, gets their IDs and sends it to the json.php for a result. Each id returns a different value and their load times are different. Say one loads instantly and the other loads in 10 seconds.
Whats wrong: Ok, once the page loads, all requests are sent to json.php, but if the third span is going to return a result instantly, it WAITS for the first two to load first!!
Scenario: I have 3 spans, the first one must be returned in 9 seconds, the seconds one must be returned in 4 seconds, and the third one must load in 5 seconds. Here is what happens: The first span appears after 9 seconds, the seconds span appears after 9+4 seconds and the last one loads in 9+4+3 seconds.
Here is the code:
<script>
function getData(d){
var r=Math.floor(Math.random()*500)
$('#'+d).addClass('load');
var handler = '';
$.get('json.php?request='+d+'&r='+r, function(data) {
var obj = jQuery.parseJSON(data);
for (var i = 0; i < obj.length; i++) {
var object = obj[i];
for (property in object) {
handler = object[property];
$('#'+d).removeClass('load');
$('#'+d).html(handler);
}
}
});
return true;
}
$(document).ready(function() {
$("span").each(function() {
getData($(this).attr('id'));
});
});
</script>
<span id="first_data"></span>
<span id="second_data"></span>
<span id="third_data"></span>
Anything wrong here??
