JavascriptのHTMLには重複した結果がランダムな場所に含まれています

Question

この問題は私にはまったく間違っています。私はJavascriptでHTMLスニペットをインクルードしようとしていますが、それはうまくいきますが、なんらかの理由で他のさまざまな場所にスニペットが含まれていると判断します。ここで

は、私が何を意味するかのスクリーンショットです：

また含み、これらのランダムの数と位置を変化させます。

これは私が使用する機能です。これは、属性を持つdiv要素は=「x.html」

function include() { 
    var allElements; 
    var fileName; 
    var includeRequest; 

    allElements = document.getElementsByTagName("*"); 
    for (var i = 0; i < allElements.length; i++) { 

    if (allElements[i].getAttribute("include")) { 

     fileName = allElements[i].getAttribute("include"); 
     includeRequest = new XMLHttpRequest(); 
     includeRequest.open("GET", fileName, true); 

     includeRequest.onreadystatechange = function() { 
     if (includeRequest.readyState == 4 && includeRequest.status == 200) { 

      allElements[i].removeAttribute("include"); 

      allElements[i].innerHTML = includeRequest.responseText; 
      include(); 
      delete includeRequest; 
      includeRequest = null; 
     } 
     }  
     includeRequest.send(); 

     return; 
    } 
    } 
} 

を含めるこれは、記事を含むHTMLファイルからタグを取得する機能である、とのタグのリストに追加した文書を検索して見つけました右のボックス。ご覧のとおり、1つの場所では、フッタがタグの代わりにリストに追加されます。どうしてか分かりません。

function getTags() { 
    var taglist = document.getElementById("taglist"); 

    var tagsRequest = new XMLHttpRequest(); 

    tagsRequest.open("GET", "blogstubs.html", true); 
    tagsRequest.responseType = "document"; 

    tagsRequest.onreadystatechange = function() { 
     if (tagsRequest.readyState == 4 && tagsRequest.status == 200) { 

      var tagsResponse = tagsRequest.responseXML; 
      var tags = tagsResponse.getElementsByClassName("tag"); 
      var tags = getUnique(tags); 



      var len = tags.length; 


      for (var i = 0; i < len; i++) { 
       var li = document.createElement("li"); 

       li.appendChild(tags[i]); 

       taglist.appendChild(li); 

      } 
      delete tagsRequest; 
      tagsRequest = null; 
     } 
    }  

    tagsRequest.send(); 

} 

Javascriptのみ解決してください。アイデア？

Answer 1

あなたのウェブサイトをコピーしました（私は気にしないでください）、私の変更でそれをテストしましたが、今このバグがなくても動作しているようです。 ）

1私は新しい関数を作成し、あなたが好むものは何でも名前を変更することを忘れないでください：ここに私がやったことだ

function newFunction(allElements, includeRequest) { 
    allElements.removeAttribute("include"); 
    allElements.innerHTML = includeRequest.responseText; 
    include(); 
    delete includeRequest; 
    includeRequest = null; 
} 

2）私はこのように見てinclude()機能を変更：

function include() { 
    var allElements; 
    var fileName; 
    var includeRequest; 

    allElements = document.getElementsByTagName("*"); 
    for (var i = 0; i < allElements.length; i++) { 

     if (allElements[i].getAttribute("include")) { 
      var element = allElements[i]; 

      fileName = element.getAttribute("include"); 
      includeRequest = new XMLHttpRequest(); 
      includeRequest.open("GET", fileName, true); 

      includeRequest.onreadystatechange = function() { 
       if (includeRequest.readyState == 4 && includeRequest.status == 200) { 
        return newFunction(element, includeRequest); 
       } 
      }  
      includeRequest.send(); 

      return; 
     } 
    } 
} 

私はこの問題が、AJAX要求の非同期の性質によって引き起こされたと私はコメントで述べたと思います。したがって、グローバルスコープを使用する代わりに変数をAJAX呼び出しに渡す必要があります。そのため、この新しいコールバック関数が必要です。あなたのループでは、AJAX機能で、5なりつつ言い換える

は、元のコードにAJAX変数allElements[i]は、あなたのループのallElements[i]と同期しなかった（ループとのために別々ではなく実行しました）それは3、6か何か他のものになります。そのため、ランダムに見える要素にhtmlが追加されます。あなたのループの順序を気にしない人、誰か他の人が数えている間に待つことを本当に好まない人、AJAXは自分の順序ですべてをやります。