JS+WCF实现进度条实时监测数据加载量的方法详解


Posted in Javascript onDecember 19, 2017

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

背景

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

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

同时这边需要对数据进行处理,合并成2万条数据,然后存储,需要一定时间(也是1分钟左右)

总之,完成这个数据导入一共需要1分30秒左右

这时候,需要一个进度条来实时监测完成的数据量

(之前用的是一个动态图,不能知道程序目前的完成量,甚至不知道它是不是卡住了,只能等着)

功能

1.开辟线程,用于加载数据,处理数据
2.前台实时读取后台数据,并显示

代码

view-html

@* 数据准备进度条 *@
  <div id="container">
    <div class="content">
      <h1>数据准备</h1>
    </div>
    <!-- Progress bar -->
    <div id="progress_bar" class="ui-progress-bar ui-container">
      <div class="ui-progress" style="width: 3%;">
        <span class="ui-label" style="display: none;">完成量<b class="value">3%</b></span>
      </div>
    </div>
    <!-- /Progress bar -->
    <div class="content" id="main_content" style="display: none;">
      <p>数据准备完成!</p>
    </div>
  </div>

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

后台

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

问题 & 解决

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也会让你的效率下降

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的超简单上下翻
Apr 20 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
jquery自定义显示消息数量
Dec 19 #jQuery
基于Vue开发数字输入框组件
Dec 19 #Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 #jQuery
从setTimeout看js函数执行过程
Dec 19 #Javascript
mongoose更新对象的两种方法示例比较
Dec 19 #Javascript
jquery中done和then的区别(详解)
Dec 19 #jQuery
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 #Javascript
You might like
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
javascript中的一些注意事项 更新中
2010/12/06 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
python进阶之自定义可迭代的类
2019/08/20 Python
python 实现单通道转3通道
2019/12/03 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
pymysql模块使用简介与示例
2020/11/17 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
SQL Server连接查询的实用教程
2021/04/07 SQL Server
编写python程序的90条建议
2021/04/14 Python
Python实现制作销售数据可视化看板详解
2021/11/27 Python
Python 统计序列中元素的出现频度
2022/04/26 Python