本文主要介紹了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.執行緒問題
解決：開始是監控使用線程，後來改成處理資料使用線程解決：處理資料使用線程自動運行，前台使用ajax不斷查詢後台的一個變數load_data_amount
注意是傳回值的類型，以及是result還是result.d ，不同情況下是不一樣的#########5.資料型別問題##########解決：讀取資料完成的百分比，是用完成量/所有量得到的，這裡的數一直算不對，是因為int型別承受不住11萬的運算以及之後的小數，用double和float可以############小結######### ####本來想著開個線程，加個變量，返回前台，加一個進度條，讀取變量就OK了######但是中間的這個MVC，這個Spring，這個接口，之前的方法各種不好使，以及在它們下面的運算，ajax……一個一個分開解決，最後還是解決了######分而治之，逐個解決，測試就好######另外，框架和合作在帶來便利的同時，中間的限制和bug也會讓你的效率下降。 ######相關推薦：#########JavaScript實作進度列的原生程式碼#############JS原生上傳大檔案顯示進度列-php上傳檔案# ###########php中關於進度條函數的實例分析######以上是JS+WCF實現進度條功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
