微客导航 » 文章资讯 » JS+WCF实现进度条实时监测数据加载量的方法详解

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

2023-09-19 04:14:05 184

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

背景

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

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

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

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

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

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

功能

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

代码

view-html

@*数据准备进度条*@


数据准备

完成量3%

数据准备完成！

view-js

$(function(){
$('#initialization').click(function(){
$.messager.confirm('提示','是否要进行数据初始化？',function(r){
if(!r){
return;
}
else{
$('#container').show();
vart1=window.setInterval(process_bar,1500);
}
});
});
});
functionprocess_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

staticboolflag=true;
publicintLoadData()
{
intresult=Ipaperbll.LoadDataAmount();
if(flag)
{
Threadthread=newThread(newThreadStart(ThreadLoadData));
thread.Start();
flag=false;
}
returnresult;
}
privatevoidThreadLoadData()
{
Ipaperbll.initializeData();
}

后台

staticintload_data_amount;//当前数据准备量
publicboolinitializeData()
{
boolflag=false;//定义返回值
//获得数据
//code....code....code....
load_data_amount=5;//完成工作量
intpage=0;
intamount=50000;//一次获取数据量不能超过10万
while(page*amount==list.Count)
{
//code....code....code....
load_data_amount=load_data_amount+5;
}
load_data_amount=50;//读取数据默认的工作量
doubletotalamount=list.Count();
foreach(variteminlist)
{
//code....code....code....
load_data_amount=Convert.ToInt32((1-(totalamount--)/double.Parse(list.Count().ToString()))*50)+50;//根据数据改变的完成工作量
}
load_data_amount=100;//完成工作量
flag=true;
returnflag;
}
//返回当前准备数据量
publicintLoadDataAmount(){
returnload_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程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

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

数据准备

热门推荐

随机推荐