Execution order of multiple asynchronous requests

Question

Consider the following code:

<div id="output"></div> 

var i, item;
var s = "Succeed";

for (i = 0 ; i < s.length ; i++){
    item = s[i];
    (function(item){
       $.get('http://echo.jsontest.com/key/value/one/two').done(function(ret){
          $("<p>"+item+"</p>").appendTo($('#output'));
       });
    })(item);
}

How may I fix it as to get Succeed in the right order and not in a random one? I want to keep the asynchronous requests .

Answer 1

The are two ways to achieve your goal is to separate async requests with actual drawing.

1. Separate async requests with actual drawing

   • Get all items using async requests and put them to the list
   • Sort the list after all items received and show it to user

2. Introduce slot system or position index of the received item