AJAXを連続して連続して呼び出すJS

Question

これは私の最初の質問です。

ストレートJavaScriptとAjaxを使用してファンシーテーブルの形式でライブデータ「プレゼンテーション」を作成しようとしていますが、バックエンドはPHPです。テーブルをリフレッシュするために、毎回リクエストをする必要があります.3秒と言うと、4は大丈夫です。データベースはRedisDBです。私は、データとその大丈夫を取得するPHPスクリプトを作った。私は1つのJSファイルをリクエストして処理/処理しましたが、それは問題ありません。 プレゼンテーションは素晴らしく、JSで書かれたアルゴリズムは優れています。約600行、いくつかの単純なif-elseやその他のスイッチはもう少し複雑です。

これは今や厄介になります。私はこれを継続的に行うために奇妙なことを得ることはできません、私はsetTimeout（）とsetInterval（）で方法を試しました、私はスリープのような関数などでタイマーと無限ループを作ったが、最初のページが読み込まれた後。

Ajaxリクエストのコードは、純粋なJSではかなり簡単です。 JSON文字列データをjsonParse（）で解析し、データの処理を行います。

これはすべて機能します。これは、次のリクエストがどのように開始されても（ユーザー操作など）、失敗します。

AJAXコード：

window.onload = function(){ 
     getEventdataFromDB(); 
    } 

    function getEventdataFromDB(){ 

     var xmlhttp; 

     if(window.XMLHttpRequest){ 
      xmlhttp = new XMLHttpRequest(); 
     }else{ 
      xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
     } 


     xmlhttp.onreadystatechange = function(){ 
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ 

       var dbData = xmlhttp.responseText; 

       if(dbData != ''){ 
        processEvents(dbData); //function for data processing 
       }  
      }    
     } 

     xmlhttp.open('GET','getEvents.php?dataRequest=true',true); 
     xmlhttp.send(); 

    } 

に私はそれが流れを追跡し、jQueryと他のフレームワークを使用しないように、これらの日の罪のビットだということを知っているけど、私はただの最新かつ最高の簡素化に大きなないんだけどまずはうまくいくもの。

これを行うにはどのような方法がありますか、どのように進めるべきか、何を使用するか私はいくつか調査し、コールバックとPromiseオブジェクトを連鎖することを指摘しました。

私がこれを行う最初の方法であることは明らかでありませんので、ここではどのような方法がありますか。

Answer 1

前回の要求を確実に行うための唯一の方法は、次の呼び出しを開始する前に終了します。したがって、前の要求のonreadystatechangedイベントから次の呼び出しを開始します。 ajaxは非同期に実行されるため、実行する他のコードがajax呼び出しの前または後に実行されるかどうかは保証されません。あなたが要求間の少しの遅れを望んでいた場合

var xmlhttp; 

window.onload = function(){  
    setupAjaxObject(); 
    getEventdataFromDB(); 
} 

function setupAjaxObject() 
{ 
    if(window.XMLHttpRequest){ 
     xmlhttp = new XMLHttpRequest(); 
    }else{ 
     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
    } 


    xmlhttp.onreadystatechange = function(){ 
     if(xmlhttp.readyState == 4){ 
      if(xmlhttp.status == 200){ 

      var dbData = xmlhttp.responseText; 

      if(dbData != ''){ 
       processEvents(dbData); //function for data processing 
      } 
      } 
      getEventdataFromDB(); //run the next request 
     } 
    } 
} 

function getEventdataFromDB(){ 

    xmlhttp.open('GET','getEvents.php?dataRequest=true',true); 
    xmlhttp.send(); 

} 

は、あなたがタイムアウト内部の次の要求への呼び出しをラップすることができます：

はつまり、あなたのスクリプトビットを再編成する必要があります。