1

要件：以下のコードのようなコードがあります。保存ボタンをクリックした後、プログレスバーをオーバーレイで表示したい。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>
4

2 に答える 2

2

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-21T06:35:31.237 に答える
0

問題は、同期 ajax 呼び出しを使用していたためだったようです。呼び出しを非同期に変更しましたが、問題はありません。

于 2009-12-21T07:22:54.387 に答える