JS+WCF implémente la fonction de barre de progression

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 front-end js 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. Amis qui en ont besoin Vous pouvez vous y référer, j'espère que cela pourra aider tout le monde.

Contexte

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

C'est nécessaire utiliser WCF pour récupérer 110 000 éléments de données, en raison de la requête conjointe à plusieurs niveaux et du tri là-bas, c'est relativement lent (environ 1 minute)

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

En bref, il faut environ 1 minute et 30 secondes pour terminer cette importation de données

À l'heure actuelle, une barre de progression est nécessaire pour surveiller la quantité de données complétées en temps réel

(avant d'utiliser un graphique dynamique, je ne peux donc pas connaître le montant actuel d'achèvement du programme, ni même s'il est bloqué, je ne peux qu'attendre)

Fonction

Ouvrir 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 affiche le

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

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

Problèmes et solutions

1. >Solution : utilisez la démo en ligne, CSS+js peut être généré dynamiquement et modifiez simplement les données

2 Problème de threading

Solution. : Au début, le thread était utilisé pour la surveillance, puis il a été remplacé par le thread utilisé pour le traitement des données

3 Problème de surveillance en temps réel

Solution : Traitez les données à l'aide de threads pour s'exécuter automatiquement. Le frontend utilise ajax pour interroger en continu une variable load_data_amount en arrière-plan

4. Problème de rapport d'erreurs Ajax

Notez le type de retour. value , et qu'il s'agisse de result ou result.d, c'est différent selon les situations

5. Problème de type de données

Solution : le pourcentage de lecture des données est terminé. using Obtenu en complétant le montant/tous les montants, les nombres ici sont toujours faux, car le type int ne peut pas supporter l'opération de 110 000 et les décimales suivantes. Utilisez double et float pour

Résumé <.>Au départ, j'avais pensé à ouvrir un fil de discussion, à ajouter une variable, à retourner à la réception, à ajouter une barre de progression et à lire la variable

Mais le MVC dans le. milieu, ce printemps, cette interface, les méthodes précédentes n'étaient pas faciles à utiliser, et les opérations sous elles, ajax... les ont résolues une par une, et finalement l'ont résolu

Diviser pour mieux régner, résolvez-les un par un, et testez-les

De plus, même si les frameworks et la coopération apportent de la commodité, les limitations et les bugs au milieu réduiront également votre efficacité.

Recommandations associées :

Code natif JavaScript pour implémenter la barre de progression

Téléchargement natif JS, affichage de gros fichiers, barre de progression-fichier de téléchargement php

Exemple d'analyse de la fonction de barre de progression en php

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!