.each() петля ждет, пока другой цикл не закончится до начала

Question

У меня есть две основные петли для posts и comments. Однако комментарии не отображаются, по-видимому, потому, что идентификатор сообщения еще не включен в DOM (?).

$.getJSON('fresh_posts.php',function(data){ 

    //posts 

    $.each(data.freshposts, function(id, post) { 
     // set variables and append divs to document 
     var id = post.id; 
     ... 
    }); 

    // comments attached to each post 

    $.each(data.freshcomments, function(id, commentList) { 
     $.each(commentList, function(index, c) { 
      // set variables and append comments to each post div 
      var postid = c.postid; // this is the same as post.id (linked) 
      ... 

      var full = "<div> ... </div>"; 

      $('#comment-block'+postid).append(full); // comment-block+postid is attached with each post div, so it tells the comment which div it should be appended to. 
     }) 
    }); 
}); 

Не показывать комментарии^

Если я обернуть петлю $.each для комментариев в setTimeOut(function(){},1), комментарии могут отображаться - Я полагаю, что нужно ждать 1 миллисекунду до того, как цикл может начаться ? Однако это не похоже на хороший/безупречный способ обеспечить это.

setTimeOut(function(){ 
    $.each(data.freshcomments, function(id, commentList) { 
     ... 
    }) 
},1) 

Выводит комментарии^

Answer 1

мне удалось решить эту проблему через несколько часов работы.

Я сделал две функции: getPosts() и appendComments(). Я использовал метод обещания:

function getPosts(){ 

    var deferred = new $.Deferred(); // new deferred 

    $.getJSON('fresh_posts.php',function(data){ 
     global_save_json = data.freshcomments; 
     var howManyPosts = Object.keys(data.freshposts).length; // how many posts there are (object length) 
     var arrayCount = 0; 
     $.each(data.freshposts, function(id, post) { 

// closing tags for above 

return deferred.promise(); 

} 

Я имел метод асинхронного (только узнал, что это было), чтобы проверить, если изображение было предназначено для сетчатки дисплеев в getPosts.

if (retina === "true") { 

    var img = new Image(); 
    img.onload = function() { 

     var retina_width = this.width/2; 
     var post = '...'; 
     $('.main').append(post); 
     arrayCount++; // for each post add +1 to arrayCount 
     if (arrayCount == howManyPosts) { // if last post 
      deferred.resolve(); 
     } 
    } 
    img.src = image; 

    } else { 
    ... 

Я тогда сделал

getPosts().then(appendComments);

после закрытия тега функции getPosts. Таким образом, в принципе, несмотря на то, что функция завершается, она все еще ждет, чтобы асинхронный метод также завершил эту функцию до вызова функции getComments. Таким образом, идентификатор сообщения будет существовать в документе для добавления комментариев.

appendComments выглядит следующим образом:

function appendComments(){ 

    if (global_save_json != null){ 
     $.each(global_save_json, function(id, commentList) { 
     $.each(commentList, function(index, c) {