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 相关文章推荐
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
JS中判断null的方法分析
Nov 21 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
Vue Router的手写实现方法实现
Mar 02 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
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
10个简化PHP开发的工具
2014/12/25 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python进行TCP端口扫描的实现
2018/12/21 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
信用社实习人员自我鉴定
2013/09/20 职场文书
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
服务口号大全
2014/06/11 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
党课主持词大全
2015/06/30 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
代码解析React中setState同步和异步问题
2021/06/03 Javascript
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers