JS+WCF实现进度条实时监测数据加载量的方法详解资源-CSDN文库

143 浏览量 2020-10-18 21:46:53 上传评论收藏 62KB PDF 举报

资源推荐

资源详情

资源评论

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

主要介绍了JS+WCF实现进度条实时监测数据加载量的方法,结合实例形式分析了大量数据导入过程中前台js与

后台WCF交互实现实时显示加载进度的相关操作技巧,需要的朋友可以参考下

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

背景背景

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

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

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

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

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

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

功能功能

1.开辟线程，用于加载数据，处理数据

2.前台实时读取后台数据，并显示

代码代码

view-html

@* 数据准备进度条 *@

<div id="container">

<div class="content">

<h1>数据准备</h1>

</div>

<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%</span>

</div>

</div>

<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);

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

内容反馈

weixin_38612437

粉丝: 5
资源: 907

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip