JS+WCF implementiert die Fortschrittsbalkenfunktion

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 Es ist möglich, eine große Datenmenge zu importieren, um die Echtzeitanzeige des Ladefortschritts in Form von Beispielen zu realisieren. Freunde, die es benötigen, können sich darauf beziehen, ich hoffe, es kann jedem helfen.

Hintergrund

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

Es ist notwendig Um WCF zum Abrufen von 110.000 Daten zu verwenden, ist es aufgrund der mehrstufigen gemeinsamen Abfrage und Sortierung relativ langsam (ca. 1 Minute)

Gleichzeitig müssen die Daten hier verarbeitet werden. In 20.000 Datenstücke zusammengeführt und dann gespeichert, was eine gewisse Zeit in Anspruch nimmt (ebenfalls 1 Minute)

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

Zu diesem Zeitpunkt ist ein Fortschrittsbalken erforderlich, um die Menge der abgeschlossenen Daten in Echtzeit zu überwachen

(vorher Es wird ein dynamisches Diagramm verwendet, sodass wir den aktuellen Abschlussgrad des Programms nicht kennen, oder auch wenn es hängen bleibt, können wir nur warten)

Funktion

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

Code

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 () {
    $('#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();
}

Backend

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 🎜>Lösung: Verwenden Sie die Online-Demo, CSS+JS können dynamisch generiert werden und ändern Sie einfach die Daten

2. Threading-Problem

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

3. Echtzeitüberwachungsproblem

Lösung : Verarbeiten Sie Daten mithilfe von Threads, um sie automatisch auszuführen.

Ajax-Fehlerberichterstattungsproblem

Beachten Sie die Art des Problems Rückgabewert, und ob es sich um result oder result.d handelt, ist in verschiedenen Situationen unterschiedlich

5. Datentypproblem

Lösung: Der Prozentsatz der Lesedaten beträgt Vervollständigung durch Vervollständigung des Betrags/aller Beträge. Die Zahlen hier sind immer falsch, da der Typ int der Operation von 110.000 und nachfolgenden Dezimalstellen nicht standhalten kann. Sie können Double und Float verwenden.

Zusammenfassung Ich habe ursprünglich darüber nachgedacht, einen Thread zu öffnen, eine Variable hinzuzufügen, zur Rezeption zurückzukehren, einen Fortschrittsbalken hinzuzufügen und die Variable zu lesen

Aber die MVC ist drin In der Mitte, in diesem Frühjahr, dieser Schnittstelle, waren die vorherigen Methoden nicht einfach zu verwenden und die Operationen darunter, Ajax ... lösten sie einzeln und lösten sie schließlich

Teile und herrsche, löse sie Eines nach dem anderen und testen Sie sie

Außerdem bringen Frameworks und Zusammenarbeit zwar Komfort mit sich, Einschränkungen und Fehler in der Mitte verringern jedoch auch Ihre Effizienz.

Verwandte Empfehlungen:

JavaScript-nativer Code zum Implementieren des Fortschrittsbalkens

JS-nativer Upload großer Dateianzeige-Fortschrittsbalken-PHP-Upload-Datei

Beispielanalyse der Fortschrittsbalkenfunktion in PHP

Das obige ist der detaillierte Inhalt vonJS+WCF implementiert die Fortschrittsbalkenfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!