JavaScriptの更新機能の問題

Question

次のjavascriptコードに問題があります。 基本的には、Unixサーバー上のプロセスに対してバックグラウンドチェック（check.php）を実行します。 PHPとレスポンスの実行時間は約1.2-1.5秒（Mozillaでテストしました）ですので、以下のスクリプトを作成して、そのプロセスで何が起きているのかを確認し、それに応じてDIVの背景を変更してください。 ちょうどいくつかのリフレッシュの後、それはちょうどハングします、なぜなら私はそれがループに入り、最初の機能が終了するのを待たずにそれが積み重なるからです。 アイデアは何ですか？より簡単な方法はありますか？

<script language="javascript" type="text/javascript"> 

    function getVal(param) 
    { 
     var strURL = param; 
     var req = new XMLHttpRequest(); 
     req.open("GET", strURL, false); //third parameter is set to false here 
     req.send(null); 
     return req.responseText; 
    } 

    function changeDivImage() 
    { 
     var pid = getVal("check.php") 
     var imgPath = new String(); 
     imgPath = document.getElementById("status_body").style.backgroundImage; 

      if(pid == 2) 
      { 
       document.getElementById("status_body").style.backgroundImage = "url(active.png)"; 
      } 
      else 
      { 
       document.getElementById("status_body").style.backgroundImage = "url(down.png)"; 
      } 
     changetimer(); 
    } 

    function changetimer() 
    { 
     setInterval("changeDivImage()", 5000); 
    } 
    </script> 

Answer 1

setIntervalは繰り返し機能を呼び出すので、changeDivImageが返された後にchangetimer関数を再度呼び出すと、より多くの不要な関数がスタックされます。同期XHRを使用しないでください

<script language="javascript" type="text/javascript"> 

    function getVal(param) 
    { 
     var strURL = param; 
     var req = new XMLHttpRequest(); 
     req.open("GET", strURL, false); //third parameter is set to false here 
     req.send(null); 
     return req.responseText; 
    } 
    //this function calls it self automatically and again everytime 
    //but only when it finishes its operations. 

(function changeDivImage() 
{ 
    var pid = getVal("check.php") 
    var imgPath = new String(); 
    imgPath = document.getElementById("status_body").style.backgroundImage; 

     if(pid == 2) 
     { 
      document.getElementById("status_body").style.backgroundImage = "url(active.png)"; 
     } 
     else 
     { 
      document.getElementById("status_body").style.backgroundImage = "url(down.png)"; 
     } 
     setTimeout(changeDivImage, 5000); 
})(); 

Answer 2

MDCによれば、setInterval機能

は機能 への各呼び出しの間 一定時間遅延して、繰り返し関数を呼び出します。あなたがchangeDivImage関数の最後にchangetimer機能を呼び出しているので

は、それは古いタイマーchangetimerが呼び出されるたびに削除せずに新しいタイマーを作成します。 changeDivImage関数の最後にあるchangetimer関数への呼び出しを削除することをお勧めします。