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

getJSON似乎是复制变量

1 个答案: