해서 getJSON 변수

Question

을 복제하는 것 같다 내가 가지고있는 다음 코드를

var interests = []; 

       var result_html = ''; 

       result_html += '<div class="f-page f-cover">'; 
       result_html += '<div class="cover-elements">'; 
        result_html += '<div class="f-cover-story">'; 
         result_html += '<span>Life Events</span>Interests'; 
        result_html += '</div>'; 
       result_html += '</div>'; 
       result_html += '<div class="f-cover-flip">&lt; swipe</div>'; 
       result_html += '</div>'; 

       $.ajax({ 
        type : "GET", 
        url : "", 
        dataType : "xml", 

        success : function(xml) { 

         $(xml).find('interest').each(function() { 

          var interest_id = $(this).find('id').text(); 
          var interest_name = $(this).find('name').text(); 

          var new_interest = { 
            'id': interest_id, 
            'name': interest_name,          
          }; 

          interests.push(new_interest); 

          var url="http://en.wikipedia.org/w/api.php?action=parse&format=json&page=" + interest_name + "&redirects&prop=text&callback=?"; 

           var jqxhr = $.getJSON(url, function(data) { 
           console.log("success"); 
           wikiHTML = data.parse.text["*"]; 
           $wikiDOM = $("<document>"+wikiHTML+"</document>"); 

           result_html += '<div class="f-page">'; 
           result_html += '<div class="f-title">'; 
            result_html += '<a href="index.jsp">Back to bookshelf</a>'; 
            result_html += '<h2 id="event_name">Your Interests</h2>'; 
            result_html += '<a href="#"></a>'; 
           result_html += '</div>'; 

            result_html += '<div class="box w-50 h-100">'; 
            result_html += '<div class="img-cont img-1"></div>'; 
            result_html += '<h3>' + interest_name; 

            //result_html += $wikiDOM.find('.infobox').html(); 

           result_html += '</div>'; 

           console.log(result_html); 
           }) 
           .done(function() { 
            console.log("second success"); 

           }) 
           .fail(function() { 
            console.log("error"); 
           }) 
           .always(function() { 
            console.log("complete"); 
           }); 

           // Perform other work here ... 

           // Set another completion function for the request above 
           jqxhr.done(function() { 
           console.log("second complete"); 
           result_html += '<div class="f-page f-cover-back">'; 
           result_html += '<div id="codrops-ad-wrapper"><a href="index.jsp" >Back to bookshelf</a></div>'; 
           result_html += '</div>'; 
           $('.container').append(result_html); 
           console.log(result_html); 
           }); 

         }); 

        }, 
        error : function(xhr) { 
         alert(xhr.responseText); 
        } 
       }); 

그러나해서 getJSON 여러 번에게 그것의 외부에 처음 result_html의 APPEND 인쇄되어

result_html += '<div class="f-page f-cover">'; 
result_html += '<div class="cover-elements">'; 
result_html += '<div class="f-cover-story">'; 
result_html += '<span>Life Events</span>Interests'; 
result_html += '</div>'; 
result_html += '</div>'; 
result_html += '<div class="f-cover-flip">&lt; swipe</div>'; 
result_html += '</div>'; 

코드의이 부분을 콘솔 로그를 만들 때 한번만 나타나야합니다. 다음과 같이 복제하면됩니다 :

success 
<div class="f-page f-cover"> 
    <div class="cover-elements"> 
    <div class="f-cover-story"> 
     <span> 
     Life Events 
     </span> 
     Interests 
    </div> 
    </div> 
    <div class="f-cover-flip"> 
    &lt; swipe 
    </div> 
</div> 
<div class="f-page"> 
    <div class="f-title"> 
    <a href="index.jsp"> 
     Back to bookshelf 
    </a> 
    <h2 id="event_name"> 
     Your Interests 
    </h2> 
    <a href="#"> 
    </a> 
    </div> 
    <div class="box w-50 h-100"> 
    <div class="img-cont img-1"> 
    </div> 
    <h3> 
     Curtis Stigers 
    </div> 
    second success 
    complete 
    second complete 
    <div class="f-page f-cover"> 
     <div class="cover-elements"> 
     <div class="f-cover-story"> 
      <span> 
      Life Events 
      </span> 
      Interests 
     </div> 
     </div> 
     <div class="f-cover-flip"> 
     &lt; swipe 
     </div> 
    </div> 

왜 이 일이 일어 났습니까? result_html의 해당 부분이 ajax 및 getJSON 요청 전에 만 발생하기 때문에 발생하지 않아야합니다.

Answer 1

이, each function APPEND마다 시도

$(xml).find('interest').each(function() { 

     var interest_id = $(this).find('id').text(); 
     var interest_name = $(this).find('name').text(); 
     var new_interest = { 
          'id': interest_id, 
          'name': interest_name,          
          }; 
     interests.push(new_interest); 
     }); // Close Function Here 
     var url="http://en.wikipedia.org/w/api.php?action=parse&format=json&page=" + interest_name + "&redirects&prop=text&callback=?"; 
      ........................... 
      .............................. 

          // Perform other work here ... 

          // Set another completion function for the request above 
          jqxhr.done(function() { 
          console.log("second complete"); 
          result_html += '<div class="f-page f-cover-back">'; 
          result_html += '<div id="codrops-ad-wrapper"><a href="index.jsp" >Back to bookshelf</a></div>'; 
          result_html += '</div>'; 
          $('.container').append(result_html); 
          console.log(result_html); 
          }); 
        // }); Remove This line