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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
js实现登录与注册界面
Nov 01 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
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通过COM使用ADODB的简单例子
2006/12/31 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
js实现录音上传功能
2019/11/22 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
Python科学计算之NumPy入门教程
2017/01/15 Python
python实现批量注册网站用户的示例
2019/02/22 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
中层干部培训方案
2014/06/16 职场文书
经理聘任证明
2015/03/02 职场文书
学雷锋感言
2015/08/03 职场文书
PHP命令行与定时任务
2021/04/01 PHP
php解析非标准json、非规范json的方式实例
2022/05/10 PHP