按顺序运行Ajax

Just wondering how to make sure Ajax in for loop returns values in order. For example, I have this code:

for(var i=0; i < list.length; i++) {
  $.ajax({
    url: ...,
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
      ...
      var html = '...';
      $('#some-div').append(html);
    })
}

And when I run it, result sometimes run in right order, but sometimes it doesn't. I don't know what to do. Please someone helps me fix this problem. Thanks!

They don't return in order, and that is out of your control unless you queue the calls sequentially (which will slow down the whole process) but that does not mean you can't assemble the results in the correct order.

Add a scoping function and use a temp container appended immediately (in order) and filled in later after the Ajax completes:

for(var i=0; i < list.length; i++) {
  function(i){
      var $div = $('<div>');
      $('#some-div').append($div);
      $.ajax({
       url: ...,
       type: 'get',
       dataType: "jsonp",
       success: function(data) {
         ...
         var html = '...';
         $div.append(html);
    })
  }(i);
}

The scoping function gets immediately executed, passing i as a local i parameter (if needed). This is what they call an IIFE (Immediately Invoked Function Expression).

Alternatively, you can then use the value of i to determine where in sequence to insert the particular result. Personally I like the first "placeholder" option.

Note: As @Rooster points out, you are often better off making a single Ajax call that returns multiple items (already in sequence).

Generally to do this you will have to call the 2nd request on the success of first request and 3rd on the success of the 2nd.. so on..

var urls = ["http://www.google.com", ...];
function callAjax(ajaxReqId){
   $.ajax({
    url: urls[ajaxReqId], //keep your urls in an array, Take the URL from the array with the index received as parameter.
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
      ...
      var html = '...';
      $('#some-div').append(html);

      //On success, we are ready to go to next ajax call.
      ajaxReqId++; //So, we increment the index
      if(ajaxReqId < urls.length) //Ensure that we don't cross the maximum requests we intent to call.
          callAjax(ajaxReqId); //Call the same function we used to call request 1. Just with incremented Id.
    })
}

callAjax(0); //Call the very first ajax request by index.

This should help you...

Edit: Just a note: This is still async and does the job as you want... waits for the response of earlier request before proceeding to the next.