使用重疊顯示進度條的問題

要求：我有一段代碼類似於下面的代碼。我想在單擊保存按鈕後在疊加層中顯示進度條。一旦我收到來自ajax調用的響應，就會顯示一條警報，顯示操作已成功。

問題：疊加層（進度條）只有在我們從ajax調用得到響應並顯示警報後纔可見。它在Ajax調用正在處理時不可見。

我在這裏做錯了什麼，或者這是預期的行爲？我正在使用純JavaScript。我無法使用任何外部庫來執行此操作。使用重疊顯示進度條的問題

<script> 
    function save(){ 
     document.getElementById('overlaydiv').style.display = 'block'; 
     document.getElementById('progressBarDiv ').style.display = 'block'; 
     var URL = 'some url'; 
     ajaxFunction(URL, false); 
    } 
    function ajaxFunction(URL, isAsynchronousCall){ 
     var xmlHttp; 
     var callTypeFlag = true; // is an Asynchronous Call 
     if(isAsynchronousCall != null){ 
     callTypeFlag = isAsynchronousCall; 
     } 
     try{ 
      if (window.XMLHttpRequest) { 
      xmlHttp = new XMLHttpRequest(); 
      } else if (window.ActiveXObject) { 
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
     }catch (e){ 
     alert("Your browser does not support AJAX!"); 
     return false; 
     } 
     xmlHttp.open("GET", URL, callTypeFlag); 
     xmlHttp.onreadystatechange = function(){responseProcessor(xmlHttp)}; 
     xmlHttp.send(null); 
    } 
    function responseProcessor(xmlHttp){ 
    //If the readystate is 4 then check for the request status. 
     if (xmlHttp.readyState == 4) { 
     if (xmlHttp.status == 200) { 
      alert('Settings saved successfully'); 
      window.close(); 
      opener.location.href='new URL'; 
     } 
     } 
    } 
</script> 

<div id="overlaydiv" style="display:none"/> 
<div id="progressBarDiv" style="display:none"> 
    <img border="0" src="progressBar.gif"/> 
</div> 
<div> 
<table> 
    <tr> 
    <td> 
     <input type="button" onclick="save()"/> 
    </td> 
    </tr> 
</table> 
</div>

來源

2009-12-21 Deepak Singh Rawat

你的'ajaxFunction'看起來像什麼？ – 2009-12-21 06:35:49

它出現的問題是因爲我使用同步Ajax調用放少許延遲。我改變了呼叫異步，現在沒有問題。

來源

2009-12-21 07:22:54

調用ajaxFunction時（）

function save(){ 
     document.getElementById('overlaydiv').style.display = 'block'; 
     document.getElementById('progressBarDiv ').style.display = 'block'; 

     setTimeout(ajaxFunction, 50);//5,10,20,30,40 will do 
}

來源

2009-12-21 06:35:31 jerjer

setTimeOut解決方案不起作用。 – 2009-12-21 07:00:29

使用重疊顯示進度條的問題

回答

相關問題