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追加這是它外面：

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追加

$(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