JavaScriptのプログレスバーの可視性

Question

私は最初に隠されていたhtml cssの単純な循環ローディングバーを持っています。クリックすると、サーバー上でajax呼び出しを繰り返して送信するjavascript関数が呼び出されます。ループの前に可視性をtrueに設定しようとしています。そして1つは完了です、私は再びfalseの可視性を設定する必要があります。ここ は私のコードです：ここでは

<div class="sk-fading-circle" style="visibility: hidden" id="loading"> 
    <div class="sk-circle1 sk-circle"></div> 
    <div class="sk-circle2 sk-circle"></div> 
    <div class="sk-circle3 sk-circle"></div> 
    <div class="sk-circle4 sk-circle"></div> 
    <div class="sk-circle5 sk-circle"></div> 
    <div class="sk-circle6 sk-circle"></div> 
    <div class="sk-circle7 sk-circle"></div> 
    <div class="sk-circle8 sk-circle"></div> 
    <div class="sk-circle9 sk-circle"></div> 
    <div class="sk-circle10 sk-circle"></div> 
    <div class="sk-circle11 sk-circle"></div> 
    <div class="sk-circle12 sk-circle"></div> 
</div> 

はJavaScriptを行く：私はここで間違って

function visible(id, flag){ 
    if (flag == 1){ 
     document.getElementById(id).style.visibility = 'visible'; 
    } 
    else if (flag == 0){ 
     document.getElementById(id).style.visibility = 'hidden'; 
    } 
} 

function sendRequest(urls) { 

    if (urls.length == 0) { 
     return; 
    } else { 
     var A = urls.split(','); 
     visible('loading', 1); 
     for (var i = 0; i < A.length; i++) { 
      var xmlhttp = new XMLHttpRequest(); 
      xmlhttp.onreadystatechange = function() { 
       if (this.readyState == 4 && this.status == 200) { 
        var result_set = JSON.parse(this.responseText); 
        if (result_set.flag == 1) { 
         visible('stock-table', 1); 
         insertRow('stock-table', result_set.url, result_set.title); 
        } 
       } 

      }; 
      xmlhttp.open("GET", "scrapper.php?url=" + A[i], true); 
      xmlhttp.send(); 
     } 
     visible('loading', 0); 

    } 

} 

何をやっていますか？

Answer 1

ここで問題となるのは、XMLHttpRequestがです。非同期です。これは、要求がサーバーに送信されている間、javascriptが待機しないことを意味します。これは何が起こるかです：

1. プログレスバーが設定されている「目に見える」へ
2. XMLHttpRequest sがプログレスバーがXMLHttpRequest秒の応答がある
3. に「隠し」に設定されている
4. 開始されているいくつかのしばらくして受信しました。

明らかに、ステップ3と4は、と交換する必要があります。しかし、ここにこれに対する解決策があります：XMLHttpRequestが開始されるたびに、はカウンタを増やします。応答が受信されるたびに、それを減らしてください。次に、カウンタが0かどうかを確認します。0の場合、すべてのリソースがロードされ、アニメーションが非表示になります。