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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
获取Javscript执行函数名称的方法
Dec 22 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
清除输入框内的空格
Dec 21 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
js中的this的指向问题详解
Aug 29 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 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获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
PHP基础学习小结
2011/04/17 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
php函数式编程简单示例
2019/08/08 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
javascript基础知识讲解
2017/01/11 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
OpenCV 边缘检测
2019/07/10 Python
python主要用于哪些方向
2020/07/05 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
企业内控岗位的职责
2014/02/07 职场文书
入学证明
2015/06/23 职场文书
投诉书范文
2015/07/02 职场文书
公司仓库管理制度
2015/08/04 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
创业计划书之书店
2019/09/10 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
nginx rewrite功能使用场景分析
2022/05/30 Servers