本文主要介绍了js+wcf实现进度条实时监测数据加载量的方法,结合实例形式分析了大量数据导入过程中前台js与后台wcf交互实现实时显示加载进度的相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。
背景
由于项目中需要导入大量数据到memcache中
需要用wcf调取11万条数据，由于那边多级联查和排序，所以比较慢（1分钟左右）
同时这边需要对数据进行处理，合并成2万条数据，然后存储，需要一定时间（也是1分钟左右）
总之，完成这个数据导入一共需要1分30秒左右
这时候，需要一个进度条来实时监测完成的数据量
（之前用的是一个动态图，不能知道程序目前的完成量，甚至不知道它是不是卡住了，只能等着）
功能
1.开辟线程，用于加载数据，处理数据
2.前台实时读取后台数据，并显示
代码
view-html
@* 数据准备进度条 *@
<p id="container">
<p class="content">
<h1>数据准备</h1>
</p>
<!-- progress bar -->
<p id="progress_bar" class="ui-progress-bar ui-container">
<p class="ui-progress" style="width: 3%;">
<span class="ui-label" style="display: none;">完成量<b class="value">3%</b></span>
</p>
</p>
<!-- /progress bar -->
<p class="content" id="main_content" style="display: none;">
<p>数据准备完成！</p>
</p>
</p>
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实现进度条的原生代码
js原生上传大文件显示进度条-php上传文件
php中关于进度条函数的实例分析
以上就是js+wcf实现进度条功能的详细内容。