javascript中的進度條的可見性

我在html css中有一個簡單的循環加載欄，它在開始處隱藏。點擊後，我會調用一個javascript函數來迭代並在服務器上發送ajax調用。我試圖在循環之前將可見性設置爲true。其中一個完成後，我需要再次設置false的可見性。這裏是我的代碼：javascript中的進度條的可見性

<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); 

    } 

}

我在做什麼錯在這裏？

來源

2017-05-15 Wasiq Noor

請爲我們添加工作代碼片段，以檢查問題是什麼。使用codepen或jsfiddle –

*提示：*不要使用可以使用布爾值的標誌。它只會讓它更復雜。 – Aloso

@NasirT將這項工作？ https://jsfiddle.net/Le885m44/ –

這裏的問題是XMLHttpRequest是異步。這意味着，當請求被髮送到服務器時，javascript不會等待。這是發生了什麼：

進度欄設置爲「可見」
幾個XMLHttpRequest s的開始
進度欄設置爲「隱藏」
的XMLHttpRequest S的反應是一段時間後收到。

很明顯，步驟3和4應該交換。但這裏有一個解決方案：每次啓動XMLHttpRequest時，增加一個計數器。每次收到響應時，都要減少它。然後檢查計數器是否爲0.如果它是0，則加載所有資源並且可以隱藏動畫。

來源

2017-05-15 20:50:23 Aloso

像魅力一樣工作:)謝謝@Aloso –

javascript中的進度條的可見性

回答

相關問題