Comment surveiller le chargement des données dans JS+WCF

Cet article présente principalement la méthode JS+WCF pour réaliser la barre de progression afin de surveiller la quantité de chargement des données en temps réel, et analyse les compétences opérationnelles associées à l'interaction entre le js frontal et le WCF d'arrière-plan dans le processus. d'importer une grande quantité de données pour réaliser l'affichage en temps réel de la progression du chargement sous forme d'exemples. Il faut que les amis puissent se référer à

Cet article décrit la méthode de surveillance en temps réel du chargement des données à l'aide JS+WCF pour implémenter une barre de progression. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Contexte

En raison de la nécessité d'importer une grande quantité de données dans Memcache dans le projet

Vous devez utiliser WCF pour récupérer 110 000 éléments de données. En raison de la requête et du tri à plusieurs niveaux, cela est relativement lent (environ 1 minute)

À. en même temps, les données doivent être traitées ici et fusionnées en 20 000 éléments de données, puis stockées, ce qui prend un certain temps (environ 1 minute également)

En bref, cela prend environ 1 minute. minute et 30 secondes pour terminer l'importation des données

À ce stade, une barre de progression est nécessaire pour surveiller l'achèvement en temps réel Quantité de données

(J'ai déjà utilisé un graphique dynamique, donc je Je ne pouvais pas connaître le montant actuel d'achèvement du programme, ni même s'il était bloqué, je ne pouvais qu'attendre)

Fonction

1 . Ouvrez un fil de discussion pour charger et traiter les données
2 La réception lit les données d'arrière-plan en temps réel et les affiche

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

contrôleur

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

Coulisses

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

Problèmes et solutions

1. Génération de barre de progression

Solution : à l'aide de la démo en ligne, les CSS+js peuvent être générés dynamiquement, et les données peuvent être modifiées

2. Problème de thread

Solution : Au début, il s'agissait de surveiller l'utilisation du thread, et plus tard, cela a été modifié pour traiter l'utilisation des données fil

3. Problème de surveillance en temps réel

Solution : le fil de traitement des données s'exécute automatiquement et la réception utilise ajax pour interroger en continu une variable load_data_amount en arrière-plan.

Problème de rapport d'erreur 4.ajax

Faites attention au type de valeur de retour et s'il s'agit de result ou result.d, qui est différent selon les situations

5 .Problème de type de données

Solution : Le pourcentage d'achèvement de la lecture des données est obtenu en utilisant le montant d'achèvement/tous les montants. Le nombre ici est toujours faux car le. Le type int ne peut pas supporter 110 000. Pour les opérations et les décimales ultérieures, double et float peuvent être utilisés

Résumé

Au départ, j'avais pensé à ouvrir un fil de discussion. , ajouter une variable et revenir à la réception Ajouter une barre de progression et lire les variables est OK

Mais le MVC au milieu, ce printemps, cette interface, les méthodes précédentes ne sont pas faciles à utiliser, et les opérations sous eux, ajax... une par une Résolvez-le séparément, et enfin résolvez-le

Divisez pour régner, résolvez-le un par un et testez-le simplement

De plus, pendant les frameworks et la coopération apportent de la commodité, les limitations et les bugs au milieu vous rendront également plus efficace. Drop

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment utiliser jQuery pour résoudre le problème selon lequel les éléments ajoutés dynamiquement ne peuvent pas déclencher d'événements de liaison

Comment obtenir Excel contenu dans Node

Comment envoyer des requêtes à la couche de service intermédiaire dans Node (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!