0

Webアプリケーションがあります。

私のアプリケーションは多くのデータをロードし、多くの操作を行います。そのため、プログラムの進行状況の処理をクライアント側で見てみます。私はこれが好きです：

<--Here I want to display the process:-->
<h3 id="progressStatus"></h3>

ユーザーがボタンをクリックすると、プログラムが起動します。

<input id="openSystem" type="button" onclick="openSystem();"/>

たとえば、私は2つの主要な関数を呼び出します。

<script type="text/javascript">

  function openSystem(){
    loadSettings();
    loadParameters();
  }

各関数を開始する前に、「progressStatus」を変更して現在のプロセスを表示したいと思います。

  function loadSettings(){
    document.getElementById('progressStatus').innerHTML = 'Please wait. Loading settings...';
    $.ajax...//do something
  }

  function loadParameters(){
    document.getElementById('progressStatus').innerHTML = 'Please wait. Loading parameters...';
    $.ajax...//do something
  }
</script>

ただし、問題は、最近の関数の文字列のみが表示され、作業中に更新されないことです。

したがって、ここでの私の例では、最近の関数に属する「パラメータの読み込み」のみが表示されていますが、最初の文字列は無視されます。

興味深いのは、前に'alert（）'コマンドを記述した場合、すぐに書き込むことです。たとえば、次のようになります。

  function loadSettings(){
    alert();
    document.getElementById('progressStatus').innerHTML = 'Please wait. Loading settings...';
    $.ajax...//do something
  }

同じ場所に何度も何度も書き込めるように、作業中にHTMLに書き込む方法を誰かが知っていますか？

ありがとう、

リファエル

4

1 に答える 1

1

進行状況表示 (疑似コード):

var done = 0;
var jobs_total = 10; // for ex. 10 functions

function DrawProcessBar(text) {
  var process_percent = done * 100 / jobs_total;
  // output like "Finished loading ajax_job2 20%"
  document.getElementById('progressStatus').innerHTML = text + ' ' + Math.floor(process_percent) + '%';
}

function ajax_job1() {
  $.ajax(onSuccess:function(){ done++; DrawProcessBar('Finished loading ajax_job1') });
}
function ajax_job2() {
  $.ajax(onSuccess:function(){ done++; DrawProcessBar('Finished loading ajax_job2') });
}
etc.

同じ場所に何度も何度も書き込むことができるように、作業中にHTMLに書き込む方法を誰かが知っていますか?

すべての関数をまったく同じ瞬間に実行すると、それを行う意味がありません。

とにかく、いつでもすべての HTML 書き込みを遅らせsetTimeoutて、良い効果を得ることができます (それでも無意味です:))

于 2013-01-27T11:45:12.147 に答える