本文实例讲述了JS + WCF实现进度条实时监测数据加载量的方法。分享给大家供大家参考,具体如下:
由于项目中需要导入大量数据到memcache中
需要用WCF调取11万条数据,由于那边多级联查和排序,所以比较慢(1分钟左右)
同时这边需要对数据进行处理,合并成2万条数据,然后存储,需要一定时间(也是1分钟左右)
总之,完成这个数据导入一共需要1分30秒左右
这时候,需要一个进度条来实时监测完成的数据量
(之前用的是一个动态图,不能知道程序目前的完成量,甚至不知道它是不是卡住了,只能等着)
1。开辟线程,用于加载数据,处理数据
2 .前台实时读取后台数据,并显示
查看html
@ *数据准备进度条* @
& lt; div id=叭萜鳌北?
& lt; div类=澳谌荨北?
& lt; h2>数据准备& lt;/h2>
& lt;/div>
& lt; !——进度条在
& lt; div id=" progress_bar " class=" ui-progress-bar ui-container”比;
& lt; div类=皍i-progress”比;
& lt;跨类=" uilabel "祝辞完成量& lt; b类=凹壑怠痹?% & lt;/b> & lt;/span>
& lt;/div>
& lt;/div>
& lt; !——/进度条——比;
& lt; div类="内容" id=癿ain_content”比;
& lt; p>数据准备完成! & lt;/p>
& lt;/div>
& lt;/div>
之前
view-js
$(函数(){
$(" #初始化”)。点击(函数(){
.messager美元。确认(“提示”、“是否要进行数据初始化?”,函数(r) {
如果(r) {
返回;
}
其他{
$(" #容器”),告诉();
var t1=窗口。setInterval (process_bar, 1500);
}
});
});
});
函数process_bar () {
. ajax({美元
类型:“文章”,
异步:没错,
url:“/纸/LoadData”,
成功:函数(结果){
$ (" # progress_bar .ui-progress”) .animateProgress(结果);
如果结果==" 100 "){
$ (' # main_content ') .slideDown ();
$ (' # fork_me ') .fadeIn ();
setTimeout(函数(){$(“#容器”)hide ();;},1500);
window.clearInterval (t1);
}
}
})
}
之前
控制器
静态bool国旗=true;
公共int LoadData ()
{
int结果=Ipaperbll.LoadDataAmount ();
如果(国旗)
{
线程的线程=新线程(新ThreadStart (ThreadLoadData));
thread.Start ();
国旗=false;
}
返回结果;
}
私人空间ThreadLoadData ()
{
Ipaperbll.initializeData ();
}
之前
后台
静态int load_data_amount;//当前数据准备量
公共bool initializeData ()
{
bool国旗=false;//定义返回值//获得数据//代码........代码....
load_data_amount=5;//完成工作量
int页面=0;
int金额=50000;//一次获取数据量不能超10过万
而(*金额==list.Count页)
{//代码........代码....
load_data_amount=load_data_amount + 5;
}
load_data_amount=50;//读取数据默认的工作量
双totalamount=list.Count ();
foreach (var项列表)
{//代码........代码....
load_data_amount=转换。ToInt32 ((1 - (totalamount——)/double.Parse (list.Count () .ToString())) * 50) + 50;//根据数据改变的完成工作量
}
load_data_amount=100;//完成工作量
国旗=true;
返回国旗;
}//返回当前准备数据量
公共int LoadDataAmount () {
返回load_data_amount;
}
之前
<强> 1。进度条生成
解决:使用网上的演示,css + js可以动态生成,改变数据即可
<强> 2。线程问题
解决:开始是监测使用线程,后来改成处理数据使用线程
<强> 3。实时监测问题
解决:处理数据使用线程自动运行,前台使用ajax不断查询后台的一个变量load_data_amount
<强> 4. ajax报错问题
注意是返回值的类型,以及是结果还是result.d,不同情况下是不一样的
<强> 5。数据类型问题
解决:读取数据完成的百分比,是用完成量/所有量得到的,这里的数一直算不对,是因为int类型承受不住11万的运算以及之后的小数,用双和浮动可以
