Время ответа JSON AJAX в JQuery

Question

Я думаю, что это больше зависит от времени, чем кода, поэтому я действительно ищу советы по лучшей практике, как лучше всего получить ответ JSON.

<script type="text/javascript"> 

      $(window).load(function() { 
       $('#messages').append('<img src="images/loading.gif" alt="Currently Loading" id="loading" />'); 

       var ideaid = <?php echo $_GET['ideaid']; ?>; 
       $.ajax({ 

        url: 'sql/ajaxsql.php', 
        type: 'POST', 
        data: 'switch=commentList&ideaid=' + ideaid + '&filter=sortdate', 
        dataType: 'json', 

        success: function(result) { 
         var len = result.length; 
         var html; 
         console.log('length= ' + len); 
         $('#response').remove(); 
         console.log(result); 
         for(var i = 0; i < len; i++) { 
          var pic = '<img src="https://graph.facebook.com/' + result[i].user_id + '/picture&type=small" align="middle" />'; 
          var authname; 
          FB.api('/' + result[i].user_id + '?fields=name', function(AuthName) { 
           console.log(AuthName); 
           alert(AuthName.name); 
           authname = AuthName.name; 

          }); 
          html = '<p>' + result[i].comment + '<br><hr>Date Added: ' + result[i].date + ' by ' + pic + ' ' + authname + '<br><hr><hr></p>'; 
          $('#comms').append(html); 

         } 

         $('#loading').fadeOut(500, function() { 
          $(this).remove(); 

         }); 
        } 
       }); 

       return false; 
      }); 

     </script> 

С помощью этого кода он загорается, чтобы получить комментарии относительно определенной идеи (idea_id). В комментариях содержится только идентификатор пользователя (facebook). Когда все данные вернутся, успех затем сортирует данные, готовые для печати на экране в некотором порядке.

Как часть успеха, у меня есть дата, время, изображение и имя FB как часть Авторизированной информации по каждому комментарию.

Дата и время, работы. Изображение с использованием графика работает, но имя немного запоздало с загрузкой окна, и поэтому пропускает его вызов, поэтому возвращается как неопределенный, и затем появляется сообщение Alert с именем. Я понимаю, что ajax предназначен для этого.

Каков наилучший способ обойти это.

Заранее спасибо.

Эндрю

EDIT

Я был не в состоянии сделать эту работу, даже ниже предложения.

EDIT AGAIN Только что просмотренный bf обновленный вариант, как показано ниже. также будет работать. Но я провел день на этой одной функции и не осмеливался играть.

Как только FB.api вступает в игру, я не могу получить значения извне. Поэтому я принял другой подход.

Вместо Ajax, я использовал запрос со стороны PHP, который получает данные, включая идентификатор пользователя, а затем JSON опрашивается, что засов его на (mysql_fetch_array) массива следующим образом:

  $gc_result = mysql_query($gc_query); 
    while ($result = mysql_fetch_array($gc_result)) { 
     $jsonURL = "https://graph.facebook.com/" . $result['user_id'] . "/"; 
     $json = json_decode(file_get_contents($jsonURL), true); 
     $result["name"] = $json['name']; 

     $data[] = $result; 
    } 

    echo json_encode($data); 

сейчас у меня есть, что я могу затем сделать следующее и вызвать его в JQuery:

for(var i = 0; i < len; i++) { 
    var pic = '<img src="https://graph.facebook.com/' + result[i].user_id + '/picture?type=small" align="middle" />'; 
    html = '<p>' + result[i].comment + '<br><hr>Date Added: ' + result[i].date + ' by ' + pic + ' ' + **result[i]['name']** + '<br><hr><hr></p>'; 
    $('#comms').append(html); 
         } 

Это все прекрасно работает, и я полный новичок программирования JQuery и с помощью Facebook API и JSON, но я даже сидеть и я очень впечатлен этим решением. Прежде чем я увлекся, есть ли какие-то потенциальные недостатки в этом, производительности или безопасности?

Еще раз спасибо в Advance.

Эндрю

Answer 1

Вызов FB.api, вероятно, асинхронный (другой запрос Ajax), поэтому вы должны переместить код после него, чтобы внутри FB.api обратного вызова:

FB.api('/' + result[i].user_id + '?fields=name', function(AuthName) { 
    console.log(AuthName); 
    alert(AuthName.name); 
    authname = AuthName.name; 
    html = '<p>' + result[i].comment + '<br><hr>Date Added: ' + result[i].date + ' by ' + pic + ' ' + authname + '<br><hr><hr></p>'; 
    $('#comms').append(html); 
}); 

---

Вы также имеете проблема с переменной областью из-за цикла for. Один из способов исправить это - использовать отдельную функцию для создания обратного вызова.Добавьте это право после $(window).load блока до </script>:

function createFbApiCallback(jsonResult) { 
    return function(AuthName) { 
     var authname = AuthName.name; 
     var pic = '<img src="https://graph.facebook.com/' + jsonResult.user_id + '/picture&type=small" align="middle" />'; 
     var html = '<p>' + jsonResult.comment + '<br><hr>Date Added: ' + jsonResult.date + ' by ' + pic + ' ' + authname + '<br><hr><hr></p>'; 
     $('#comms').append(html); 
    } 
} 

Затем измените петлю на это:

for(var i = 0; i < len; i++) { 
    FB.api('/' + result[i].user_id + '?fields=name', createFbApiCallback(result[i])); 
} 

Answer 2

Если вы должны выполнить код, который зависит от функции обратного вызова внутри другой функции обратного вызова, выполните ваш код внутри самой внутренней функции обратного вызова. В вашем случае переместите все, что находится вне обратного вызова API FB, чтобы быть внутри него, поэтому все ваши манипуляции с DOM выполняются только тогда, когда возвращаются ответ AJAX и ответ FB.api.