Rumah > hujung hadapan web > tutorial js > 在JS+WCF中如何实现监测数据加载量

在JS+WCF中如何实现监测数据加载量

亚连
Lepaskan: 2018-06-19 17:20:03
asal
1620 orang telah melayarinya

这篇文章主要介绍了JS+WCF实现进度条实时监测数据加载量的方法,结合实例形式分析了大量数据导入过程中前台js与后台WCF交互实现实时显示加载进度的相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS+WCF实现进度条实时监测数据加载量的方法。分享给大家供大家参考,具体如下:

背景

由于项目中需要导入大量数据到memcache中

需要用WCF调取11万条数据,由于那边多级联查和排序,所以比较慢(1分钟左右)

同时这边需要对数据进行处理,合并成2万条数据,然后存储,需要一定时间(也是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>
Salin selepas log masuk

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);
        }
      }
    })
}
Salin selepas log masuk

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();
}
Salin selepas log masuk

后台

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;
}
Salin selepas log masuk

问题 & 解决

1.进度条生成

解决:使用网上的demo,css+js可以动态生成,改变数据即可

2.线程问题

解决:开始是监测使用线程,后来改成处理数据使用线程

3.实时监测问题

解决:处理数据使用线程自动运行,前台使用ajax不断查询后台的一个变量load_data_amount

4.ajax报错问题

注意是返回值的类型,以及是result还是result.d,不同情况下是不一样的

5.数据类型问题

解决:读取数据完成的百分比,是用 完成量/所有量 得到的,这里的数一直算不对,是因为int类型承受不住11万的运算以及之后的小数,用double和float可以

小结

本来想着开个线程,加个变量,返回前台,加一个进度条,读取变量就OK了

但是中间的这个MVC,这个Spring,这个接口,之前的方法各种不好使,以及在它们下面的运算,ajax……一个一个分开解决,最后还是解决了

分而治之,逐个解决,测试就好

另外,框架和合作在带来便利的同时,中间的限制和bug也会让你的效率下降

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

使用jQuery如何解决动态添加元素无法触发绑定事件

在Node中如何获取Excel内容

在node中中间服务层如何发送请求(详细教程)

Atas ialah kandungan terperinci 在JS+WCF中如何实现监测数据加载量. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Isu terkini
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan