jQuery AJAXループでjQueryUIをリフレッシュするProgressBar

Question

jQueryUIのプログレスバーには、実行されたクエリの割合が表示されます。 Oracleには、10秒以上かかる操作を表示できる素敵なシステム・テーブルがあります。私は進捗バーをリフレッシュするために、このクエリに千鳥の$ .ajax呼び出しをしようとしています。

問題は、待機時間なしで迅速なリクエストを行うループを取得するか、JavaScript全体の実行を遅らせることです。

jQueryUIダイアログで「実行」ボタンをクリックすると、最初のリクエストが開始されます。

$("#dlgQuery").dialog({ 
    buttons: { 
     Execute: function() { 
      $(this).dialog("close"); 
      StartLoop(); 
     } 
    } 
}); 

私はStartLoop()機能のいずれかを構築したり、再帰GetProgress()機能を作成しようとしています。理想的には、ループを終了したり、関数を再帰的に呼び出すのを止めるための指標として、公共の変数var isDone = falseを使用します。ここ

function StartLoop(){ 
    for (var i = 0; i < 100; i++) { 
     GetProgress(); 
    } 
} 

そして、私のサンプルAJAXリクエストです：：だから

function GetProgress() { 
    $.ajax({ 
     url: "query.aspx/GetProgress", 
     success: function (msg) { 
      var data = $.parseJSON(msg.d); 
      $("#pbrQuery").progressbar("value", data.value); 
      //recursive? 
      //GetProgress(); 

      //if (data.value == 100) isDone = true;     
     } 
    }); 
} 

私が見つけたものは、これまでの単純化のため

私はちょうど100回実行される静的なループを作っています

setTimeout(GetProgress(), 3000)（StartLoop()）はJavaScriptがフリーズしてダイアログが閉じることはありません（クエリが完了するまで待つため）。

This 1、pausecomp(3000)とほぼ同じことです。

私のAJAXリクエストの「成功」機能でこれらのいずれかを呼び出すと、無視されます（おそらく別のコールを非同期で開始しているためです）。

私はちょっとここで立ち往生しています。何か助けていただければ幸いです。

Answer 1

代わりのsetTimeout(GetProgress(), 3000)、あなたが望む：

function StartLoop(){ 
    for (var i = 0; i < 100; i++) { 
     setTimeout(GetProgress(), 3000*i); 
    } 
} 

そうでない場合は、すべての100は3秒後にオフに起動します。代わりに、0,3000,6000,9000などが必要です。3000*i;

良い、あなたはsetIntervalとclearIntervalを使用することができます。

var myInterval = setInterval(GetProgress(), 3000); 

とコールバックで、実行します。

$.ajax({ 
    url: "query.aspx/GetProgress", 
    success: function (msg) { 
     var data = $.parseJSON(msg.d); 
     $("#pbrQuery").progressbar("value", data.value); 

     if (data.value == 100) { 
      isDone = true; 
      clearInterval(myInterval); 
     }   
    } 
}); 

clearInterval再びGetProgress()を呼び出してからそれを停止します。 setIntervalメソッドを使用すると、必要なポーリングループの数を事前に把握する必要がありません。あなたが完了するまで、それは単に続行されます。

いっそ、あなたがあなたのクエリからの応答を持っていたら、それだけで再びポーリングする利点と、AJAXコールバックからGetProgress()を呼び出すことができます。

function GetProgress() { 
    $.ajax({ 
     url: "query.aspx/GetProgress", 
     success: function (msg) { 
      var data = $.parseJSON(msg.d); 
      $("#pbrQuery").progressbar("value", data.value); 

      if (data.value == 100) { 
       isDone = true; 
      } else { 
       setTimeout(GetProgress(), 2000); 
      } 
     } 
    }); 
} 

が

それからちょうどに一度GetProgress()を呼び出しますループを開始します。

Answer 2

私がやりたいことは、完了したらもう一度getProgress関数を呼び出すことだと思います。

あなたは、これは一般に「ポーリング」と呼ばれる方法であるAJAX呼び出し

$.ajax({ 
    //this is where your stuff already is 
    ,complete: getProgress() 

    //we add a timeout so it doesn't run everytime it completes, only when we want to update the progress bar. 
    ,timeout: 10000 //this is 10 seconds 
}); 

に「完全」のparamを追加することでこれを行うだろう。