JS+WCF でのデータ読み込みを監視する方法

この記事では、データの読み込み量をリアルタイムで監視するためのプログレスバーを実現するための JS+WCF の方法を主に紹介し、フロントエンド JS の関連操作スキルを分析するための実践的な例と、実現するためのバックグラウンド WCF インタラクションを組み合わせています。大量のデータをインポートする際の読み込みの進行状況をリアルタイムで表示する必要がある場合は、以下を参照してください

この記事の例では、JS+WCF で進行状況バーを実現する方法について説明します。データ読み込み量をリアルタイムで監視します。参考までに皆さんと共有します。詳細は次のとおりです:

背景

プロジェクト内のmemcacheに大量のデータをインポートする必要があるため

110,000を取得するにはWCFを使用する必要がありますマルチレベルの結合クエリとそこでの並べ替えのため、比較的遅い (約 1 分)

同時に、データはここで処理され、20,000 個のデータにマージされ、その後、保存には一定の時間がかかります（これも約 1 分）

つまり、このデータのインポートが完了するまでに合計 1 かかります。約 30 秒かかります

このとき、データのインポートを監視するために進行状況バーが必要ですリアルタイムの完了データ量

(以前は動的グラフを使用していたので、プログラムの現在の完了量を知ることができず、スタックしているかどうかさえわかりませんでした。ただ待つことができます)

関数

1. データのロードとデータ処理のためのスレッドを開きます
2. フロントデスクはバックグラウンドデータをリアルタイムで読み取り、

コード

view-html

@* 数据准备进度条 *@
  <p id="container">
    <p class="content">
      <h1 id="数据准备">数据准备</h1>
    </p>
    <!-- Progress bar -->
    <p id="progress_bar" class="ui-progress-bar ui-container">
      <p class="ui-progress" style="width: 3%;">
        <span class="ui-label" style="display: none;">完成量<b class="value">3%</b></span>
      </p>
    </p>
    <!-- /Progress bar -->
    <p class="content" id="main_content" style="display: none;">
      <p>数据准备完成！</p>
    </p>
  </p>

view-js

$(function () {
    $('#initialization').click(function () {
      $.messager.confirm('提示', '是否要进行数据初始化？', function (r) {
        if (!r) {
          return;
        }
        else {
          $('#container').show();
          var t1 = window.setInterval(process_bar, 1500);
        }
      });
    });
});
function process_bar() {
    $.ajax({
      type: "POST",
      async: true,
      url: "/Paper/LoadData",
      success: function (result) {
        $('#progress_bar .ui-progress').animateProgress(result);
        if (result =="100") {
          $('#main_content').slideDown();
          $('#fork_me').fadeIn();
          setTimeout(function () { $('#container').hide();; }, 1500);
          window.clearInterval(t1);
        }
      }
    })
}

コントローラーを表示します

static bool flag = true;
public int LoadData()
{
  int result = Ipaperbll.LoadDataAmount();
  if (flag)
  {
    Thread thread = new Thread(new ThreadStart(ThreadLoadData));
    thread.Start();
    flag = false;
  }
  return result;
}
private void ThreadLoadData()
{
  Ipaperbll.initializeData();
}

バックエンド

static int load_data_amount;//当前数据准备量
public bool initializeData()
{
  bool flag = false;  //定义返回值
  //获得数据
  //code....code ....code....
  load_data_amount = 5;//完成工作量
  int page = 0;
  int amount = 50000;//一次获取数据量不能超过10万
  while (page * amount == list.Count)
  {
    //code....code ....code....
    load_data_amount = load_data_amount + 5;
  }
  load_data_amount = 50;//读取数据默认的工作量
  double totalamount = list.Count();
  foreach (var item in list)
  {
    //code....code ....code....
    load_data_amount = Convert.ToInt32((1 - (totalamount--) / double.Parse(list.Count().ToString())) * 50) + 50;//根据数据改变的完成工作量
  }
  load_data_amount = 100;//完成工作量
  flag = true;
  return flag;
}
//返回当前准备数据量
public int LoadDataAmount() {
  return load_data_amount;
}

問題と解決策

1. プログレスバーの生成

解決策: オンラインデモを使用すると、css+js でデータを動的に生成および変更できます 以上です

2. スレッドの問題

解決策: 最初はスレッドの監視に使用されていましたが、その後、スレッドを使用してデータを処理するように変更されました

3. リアルタイム監視の問題

解決策: データの処理に使用されるスレッドが実行されます自動的に実行され、フロントデスクは ajax を使用します。バックグラウンドで常に変数load_data_amountをクエリします

4. Ajaxエラーレポートの問題

戻り値の型と、それがresultかresult.dであるかに注意してください。状況によって異なります

5. データ型の問題

解決策: データの読み取り完了率は、完了量/全量を使用して取得されます。ここでの数値は、int 型が次の演算に耐えられないため、常に間違っています。 110,000以降の小数点以下はdoubleとfloatが使えます

概要

最初はスレッドを開いて変数を追加してフロントに戻り、プログレスバーを追加して変数を読み込むと考えていましたが、それでOKでした。

でも途中で、このMVC、このSpring、このインターフェース、そして前のメソッドの様々な不都合と、その下の操作、ajax…を一つ一つ解決して、やっと解決しました

分割統治、一つずつ解決して、テストするだけです

さらに、フレームワークと連携は利便性をもたらしますが、中間の制限とバグも効率を低下させます。未来。

関連記事:

動的に追加された要素がバインディングイベントをトリガーできない問題を解決するためにjQueryを使用する方法

NodeでExcelコンテンツを取得する方法

Nodeの中間サービス層にリクエストを送信する方法(詳細なチュートリアル)

以上がJS+WCF でのデータ読み込みを監視する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。