Почему мой jquery .get() результат не может быть показан по порядку, который я даю

Question

Я пытаюсь сделать Google Analytics аналитическими инструментами Javascript, это мой код:

 <script>

  function makeRequest() {
    for (var i=0; i < shortUrl.length; i++){
      var url = shortUrl[i];
      var request = gapi.client.urlshortener.url.get({
        'shortUrl': url,
        'projection':'FULL',
      });
      request.execute(function(response) {
        console.log(response); //here is the problem begin
        var result = {
          short: response.id,
          clicks: response.analytics.allTime.shortUrlClicks
        };
        appendResults(result, i);         
      });
    }
  }

  function load() {
    gapi.client.setApiKey('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
    gapi.client.load('urlshortener', 'v1', makeRequest);
  }
</script>
<script src="https://apis.google.com/js/client.js?onload=load"></script>

результат меня бы отличал каждый раз! например: shortUrl[1,2,3,4] вернет 3,2,1,4 или 1,2,4,3...... и т. д.

что плохого в моем коде? такое асинхронная проблема? как я могу это исправить? Помогите мне, пожалуйста! Спасибо

Answer 1

Потому что AJAX асинхронный. Вы должны использовать обещания. JQuery пример.

var promises = [];
for (var i=0; i < shortUrl.length; i++){

  var dfd = new $.Deferred;

  var url = shortUrl[i];
  var request = gapi.client.urlshortener.url.get({
    'shortUrl': url,
    'projection':'FULL',
  });
  request.execute((function(dfd){return function(response) {
    dfd.resolve(response);      
  };})(dfd));

  promises.push(dfd.promise());
}

$.when.apply($, promises).done(function(){
  promises = undefined;
  for(var i in arguments){
    var response = arguments[i];
    console.log(response); //here is the problem begin
    var result = {
      short: response.id,
      clicks: response.analytics.allTime.shortUrlClicks
    };
    appendResults(result, i);  
  }
});

Мой рабочий код:

var promises = [];

var request = function(i, callback){
setTimeout(function(){return callback(i);},100 - i);  
}

for (var i=0; i < 10; i++){

  var dfd = new $.Deferred;

  request(i, (function(dfd){return function(response) {
    dfd.resolve(response);      
  };})(dfd));

  promises.push(dfd.promise());
}

$.when.apply($, promises).done(function(){
  promises = undefined;
  for(var i in arguments){

    console.log(arguments[i]); 

  }
});