JS+WCFでプログレスバー機能を実装

小云云
リリース: 2017-12-20 09:37:47
オリジナル
1406 人が閲覧しました

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

背景

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

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

同時に、ここでデータを処理し、20,000個のデータに統合してから保存する必要があり、ある程度の時間がかかります(これも約1分)

要するに、データのインポートが完了するまでに約 1 分 30 秒かかります

このとき、完了したデータの量をリアルタイムで監視するプログレスバーが必要です

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

機能

1. データのロードとデータ処理のためのスレッドを開きます
2.バックグラウンドデータをリアルタイムで表示し、

コードを表示します

view-html


@* 数据准备进度条 *@
  <p id="container">
    <p class="content">
      <h1>数据准备</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 () {
    $(&#39;#initialization&#39;).click(function () {
      $.messager.confirm(&#39;提示&#39;, &#39;是否要进行数据初始化?&#39;, function (r) {
        if (!r) {
          return;
        }
        else {
          $(&#39;#container&#39;).show();
          var t1 = window.setInterval(process_bar, 1500);
        }
      });
    });
});
function process_bar() {
    $.ajax({
      type: "POST",
      async: true,
      url: "/Paper/LoadData",
      success: function (result) {
        $(&#39;#progress_bar .ui-progress&#39;).animateProgress(result);
        if (result =="100") {
          $(&#39;#main_content&#39;).slideDown();
          $(&#39;#fork_me&#39;).fadeIn();
          setTimeout(function () { $(&#39;#container&#39;).hide();; }, 1500);
          window.clearInterval(t1);
        }
      }
    })
}
ログイン後にコピー

controller


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();
}
ログイン後にコピー

戻る終わり


りー

問題と解決策

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

解決策: オンラインデモを使用し、C ss+js を動的に生成できます。データを変更するだけです

2. スレッドの問題

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

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

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

4. Ajaxエラーの問題

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

5. データ型の問題

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

概要

当初は、スレッドを開いて、変数を追加し、フロントデスクに戻り、プログレスバーを追加し、変数を読み取るだけでOK

しかし、このMVC、この春、真ん中のこのインターフェイス、前 さまざまなメソッドが使いにくく、その下の操作も使いにくい、ajax... 一つずつ解決して、最後に解決してください

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

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

関連する推奨事項:

進行状況バーを実装するための JavaScript ネイティブ コード

JS ネイティブ アップロード、大きなファイルの表示進行状況バー - PHP ファイルのアップロード

php の進行状況バー関数の分析例

以上がJS+WCFでプログレスバー機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート