자바 스크립트의 진행 표시 줄에 대한 가시성

Question

저는 처음에 숨겨진 html css에 간단한 원형로드 바를 가지고 있습니다. 클릭하면 서버에서 ajax 호출을 반복하고 보내는 javascript 함수를 호출합니다. 루프 앞에서 가시성을 true로 설정하려고합니다. 그리고 그 중 하나가 완료되었습니다, 나는 허위의 가시성을 다시 설정해야합니다. 여기

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

가는 자바 스크립트 : 여기 내 코드 내가 잘못 여기

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이 비동기이라는 것입니다. 이것은 요청이 서버로 전송되는 동안 자바 스크립트가 대기하지 않는다는 것을 의미합니다. 이 일어나는 것이다 :

1. 진행 표시 줄이 설정되어 "볼 수"에
2. XMLHttpRequest들 진행률 표시 줄이 XMLHttpRequest의의 반응은
3. 에 "숨겨진"로 설정되어
4. 시작되는 몇 가지 몇 시간 후에 받았다.

분명히, 단계 3과 4는으로 바꿔야합니다. 그러나 여기에 대한 해결책은 다음과 같습니다. XMLHttpRequest이 시작될 때마다 은 카운터을 증가시킵니다. 응답을받을 때마다 줄입니다. 그런 다음 카운터가 0인지 확인하십시오. 0이면 모든 리소스가로드되고 애니메이션을 숨길 수 있습니다.