콜백 함수를 $ .each에 호출합니다.

Question

$ .each 루프에서 함수를 호출하지만 이전 함수가 완료 될 때까지 다음 반복이 호출되지 않도록하고 싶습니다.

function loadNewFacebookPage(newfbpage){ 

    if (isUrl(newfbpage) || newfbpage.substr(0,3) == "www"){ 
    newfbpage = newfbpage.substr(newfbpage.lastIndexOf('/') + 1); 
    } 

    $.getJSON("https://graph.facebook.com/"+newfbpage+"?fields=picture,name,category,likes,talking_about_count,link,website") 
    .done(function(rsp) { 
     $('#loadmodal').modal('show'); 
     var newpageid = rsp.id; 
     $("*[data-pcpageid]").each(function(i, elm) { 
     if(newpageid == $(this).data("pcpageid")){ 
      pageexists = true; 
      alert('Page has already been added'); 
      return; 
     } 
     }); 
     if(pageexists == false){ 
     pagename = rsp.name.split(" "); 
     pagepicture = rsp.picture.data.url; 
     $('.grid_fbpages').append("<li class='grid_li_fbpages' data-pcpageid='"+newpageid+"' style='max-width:20%;'><img src='"+pagepicture+"' class='img-circle' style='display:inline;margin-right:15px;'><h4 style='display:inline;'>"+pagename[0]+"</h4><a href='javascript:void(0)' class='btn_removefbpage' style='float:right' data-pcpageid='"+newpageid+"'>&#10005</a> <a href='javascript:void(0)' class='btn_addtofavorites' style='float:right' data-pcpageid='"+newpageid+"'>&#9733;</a><hr>Likes: "+rsp.likes+"<br>PTAT: "+rsp.talking_about_count+"<br><br></li>"); 
     //GET POSTS 
     $.getJSON('utility/get_compare_posts.php', {access_token: access_token, pid: newpageid}, function(rsp) { 
      $.each(rsp, function(postId, data) { 

      //TOP POSTS 
      if (data.hasOwnProperty('likes')){ 
       top_posts_likes.push(data.likes.like_count); 
       if (data.hasOwnProperty('comments')){ 
       top_posts_comments.push(data.comments.comment_count); 
       }else{ 
       top_posts_comments.push('0'); 
       } 
       top_posts_message.push(data.message); 
       top_posts_id.push(data.postId); 
      } 
      }); 

      //TOP POSTS 
      $(".grid_topposts").append("<li data-pcpageid='"+newpageid+"' style='max-width:20%;text-align:left;'><img src='"+pagepicture+"' class='img-circle' style='display:inline;margin-right:15px;'><h4 style='display:inline;'>"+pagename[0]+"</h4></li>"); 
      most_popular_post_index = top_posts_likes.indexOf(Math.max.apply(Math, top_posts_likes)); 
      $.getJSON("https://graph.facebook.com/"+top_posts_id[most_popular_post_index]+"?fields=picture&access_token="+access_token+"", function(rsp) { 
      $(".grid_topposts").append("<li data-pcpageid='"+newpageid+"' style='max-width:20%;'><img src='"+rsp.picture+"'><br>"+top_posts_message[most_popular_post_index]+"<br>Likes: "+top_posts_likes[most_popular_post_index]+" Comments: "+top_posts_comments[most_popular_post_index]+"</li>"); 
       top_posts_likes.splice(most_popular_post_index,1); 
       top_posts_message.splice(most_popular_post_index,1); 
       top_posts_id.splice(most_popular_post_index,1); 
       top_posts_comments.splice(most_popular_post_index,1); 

       most_popular_post_index = top_posts_likes.indexOf(Math.max.apply(Math, top_posts_likes)); 
       $.getJSON("https://graph.facebook.com/"+top_posts_id[most_popular_post_index]+"?fields=picture&access_token="+access_token+"", function(rsp) { 
       $(".grid_topposts").append("<li data-pcpageid='"+newpageid+"' style='max-width:20%;'><img src='"+rsp.picture+"'><br>"+top_posts_message[most_popular_post_index]+"<br>Likes: "+top_posts_likes[most_popular_post_index]+" Comments: "+top_posts_comments[most_popular_post_index]+"</li>"); 
        top_posts_likes.splice(most_popular_post_index,1); 
        top_posts_message.splice(most_popular_post_index,1); 
        top_posts_id.splice(most_popular_post_index,1); 
        top_posts_comments.splice(most_popular_post_index,1); 

        most_popular_post_index = top_posts_likes.indexOf(Math.max.apply(Math, top_posts_likes)); 
        $.getJSON("https://graph.facebook.com/"+top_posts_id[most_popular_post_index]+"?fields=picture&access_token="+access_token+"", function(rsp) { 
        $(".grid_topposts").append("<li data-pcpageid='"+newpageid+"' style='max-width:20%;'><img src='"+rsp.picture+"'><br>"+top_posts_message[most_popular_post_index]+"<br>Likes: "+top_posts_likes[most_popular_post_index]+" Comments: "+top_posts_comments[most_popular_post_index]+"</li>"); 
         top_posts_likes.splice(most_popular_post_index,1); 
         top_posts_message.splice(most_popular_post_index,1); 
         top_posts_id.splice(most_popular_post_index,1); 
         top_posts_comments.splice(most_popular_post_index,1); 
        }); 
       }); 
      }); 
      //END TOP POSTS 

     }); 
     } 
    }) 
    .fail(function(error) { 
    alert('Did not find any match - Please try again with another name, ID or URL'); 

    }); 
} 

감사

Answer 1

$.each() 동기이다 : 여기

$(".btn_loadfavorites").on("click",function(event){ 
$.getJSON('utility/get_user_compare_pages.php', {uid: user}, function(rsp) { 
    $.each(rsp, function(i, favorite_pageid) { 
    loadNewFacebookPage(favorite_pageid); 
    }); 
}); 
}); 

함수 (I는 중요 물건을 제거)이다. 함수를 직접 호출하는 루프 일 뿐이며, 그것에 대해서는 전혀 궁금하거나 신비하지 않습니다. 코드에서 $.each()은 loadNewFacebookPage()을 호출하고 해당 함수는 완료 될 때까지 실행되며 $.each()은 다음 요소로 이동합니다.

하지만 당신이 정말로 묻고있는 것은 무엇입니까? loadNewFacebookPage()은 아마도 비동기 함수 인 것 같습니다. 그렇다면 비동기 작업이 완료 될 때까지 기다렸다가 다음 루프 반복으로 넘어 가고 싶다고 말하고 있습니까? $.each() 루프는 그렇게하지 않습니다. 일반 for 루프도 마찬가지입니다. 대신 loadNewFacebookPage()은 완료 콜백을 제공해야하며 해당 콜백은 "루프"변수를 전달합니다.

당신이 완료 콜백이 있거나 한 다음이 할 무엇을 더 명확 것 —을 추가 할 수 있는지, 특히 더 약 loadNewFacebookPage() —에게 할 수 있습니다.

예를 들어 loadNewFacebookPage()이 완료 콜백 함수 인 두 번째 인수를 취한다고 가정합니다. 그럼 당신은 다음과 같은 코드를 작성할 수 :

$.getJSON(url, { uid: user }, function(rsp) { 
    var i = 0; 
    next(); 
    function next() { 
     if(i < rsp.length) { 
      var favorite_pageid = rsp[i++]; 
      loadNewFacebookPage(favorite_pageid, next); 
     } 
    } 
}); 

가 loadNewFacebookPage() 데이터를로드 할 $.ajax() 기능을 사용하고 있다고 가정하자. (아마 그것이, 그 일을하지 않습니다하지만이 설명하는 역할을한다?.) 그럼 당신은 같은 것을 할 수 있습니다 내가을 설명하기 위해 단지 오류 처리처럼 여기 잔뜩 생략하고있어

function loadNewFacebookPage(id, done) { 
    $.ajax({ 
     url: makeUrlFromId(id), 
     success: function(data) { 
      doStuffWithData(data); 
      done(); 
     } 
    }); 
} 

을 예.