欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-04 14:56:35
本文实例讲述了js+wcf实现进度条实时监测数据加载量的方法。分享给大家供大家参考,具体如下: 背景 由于项目中需要导入大量数据到memcache中 需要用wcf调取...

本文实例讲述了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查找算法技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结

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