So überwachen Sie das Laden von Daten in JS+WCF

Dieser Artikel stellt hauptsächlich die Methode von JS + WCF vor, um den Fortschrittsbalken zu realisieren, um die Datenlademenge in Echtzeit zu überwachen, und analysiert die damit verbundenen Betriebsfähigkeiten der Interaktion zwischen den Front-End-JS und dem Hintergrund-WCF im Prozess Der Import großer Datenmengen ermöglicht die Echtzeitanzeige des Ladefortschritts in Form von Beispielen. Freunde können darauf verweisen.

Dieser Artikel beschreibt die Methode zur Echtzeitüberwachung des Datenladevorgangs JS+WCF zur Realisierung des Fortschrittsbalkens. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hintergrund

Aufgrund der Notwendigkeit, große Datenmengen zu importieren in den Memcache im Projekt

Sie müssen WCF verwenden, um 110.000 Daten abzurufen. Aufgrund der mehrstufigen Abfrage und Sortierung ist dies relativ langsam (ca. 1 Minute)

Bei Gleichzeitig müssen die Daten hier verarbeitet und in 20.000 Dateneinheiten zusammengeführt und anschließend gespeichert werden, was eine gewisse Zeit in Anspruch nimmt (ebenfalls etwa 1 Minute)

Kurz gesagt, es dauert etwa 1 Minute und 30 Sekunden, um den Datenimport abzuschließen

Zu diesem Zeitpunkt ist ein Fortschrittsbalken erforderlich, um den Abschluss in Echtzeit zu überwachen Datenmenge

(Ich habe vorher ein dynamisches Diagramm verwendet, also habe ich Ich konnte nicht wissen, wie hoch die aktuelle Abschlussmenge des Programms ist oder ob es hängen geblieben ist, ich konnte nur warten)

Funktion

1 . Öffnen Sie einen Thread zum Laden von Daten und zum Verarbeiten von Daten
2. Die Rezeption liest die Hintergrunddaten in Echtzeit und zeigt sie an

Code

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);
        }
      }
    })
}

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();
}

Hintergrund

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;
}

Probleme & Lösungen

1. Fortschrittsbalkengenerierung

Lösung: Online-Demo verwenden, CSS+JS. Es kann dynamisch generiert werden und einfach die Daten ändern

2. Thread-Problem

Gelöst: Zuerst wurde der Thread zur Überwachung verwendet, später wurde er in den Thread geändert, der zur Datenverarbeitung verwendet wurde

3. Echtzeitüberwachungsproblem

Lösung: Verarbeiten Sie Daten mithilfe von Threads, um sie automatisch auszuführen, und das Frontend verwendet Ajax, um kontinuierlich eine Variable „load_data_amount“ im Hintergrund abzufragen

4. Ajax-Fehlerproblem

Beachten Sie, dass der Typ des Rückgabewerts und ob es sich um result oder result.d handelt, in verschiedenen Situationen unterschiedlich ist

Datentyp Problem

Lösung: Der Prozentsatz der Vervollständigung der Lesedaten wird mithilfe der Vervollständigungsmenge/aller Beträge ermittelt. Die Zahl hier ist immer falsch, da der Typ int der Operation von 110.000 und nachfolgenden Dezimalstellen nicht standhalten kann. Double und Float können verwendet werden

Zusammenfassung

Ursprünglich dachte ich darüber nach, einen Thread zu öffnen, eine Variable hinzuzufügen, in den Vordergrund zurückzukehren und einen Fortschritt hinzuzufügen bar und das Lesen der Variablen ist in Ordnung

Aber der MVC in der Mitte, der Spring, die Schnittstelle, die vorherigen Methoden funktionierten alle nicht und die Operationen darunter, Ajax ... wurden einzeln gelöst nacheinander, und schließlich wurde es gelöst

Teilen und erobern, lösen Sie sie einzeln und testen Sie sie einfach

Außerdem bringen Frameworks und Zusammenarbeit Bequemlichkeit, Einschränkungen und Fehler in der Mitte mit sich Reduzieren Sie auch Ihre Effizienz

Oben habe ich es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie jQuery, um das Problem zu lösen, dass dynamisch hinzugefügte Elemente keine Bindungsereignisse auslösen können

So erhalten Sie Excel Inhalt im Knoten

So senden Sie Anfragen an die Zwischendienstschicht im Knoten (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo überwachen Sie das Laden von Daten in JS+WCF. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!