溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JS+WCF實現進度條實時監測數據加載量的方法。分享給大家供大家參考，具體如下：
背景
由于項目中需要導入大量數據到memcache中
需要用WCF調取11萬條數據，由于那邊多級聯查和排序，所以比較慢（1分鐘左右）
同時這邊需要對數據進行處理，合并成2萬條數據，然后存儲，需要一定時間（也是1分鐘左右）
總之，完成這個數據導入一共需要1分30秒左右
這時候，需要一個進度條來實時監測完成的數據量
（之前用的是一個動態圖，不能知道程序目前的完成量，甚至不知道它是不是卡住了，只能等著）
功能
1.開辟線程，用于加載數據，處理數據
2.前臺實時讀取后臺數據，并顯示
代碼
view-html
@* 數據準備進度條 *@
<div id="container">
<div class="content">
<h2>數據準備</h2>
</div>
<!-- Progress bar -->
<div id="progress_bar" class="ui-progress-bar ui-container">
<div class="ui-progress" >
<span class="ui-label" >完成量<b class="value">3%</b></span>
</div>
</div>
<!-- /Progress bar -->
<div class="content" id="main_content" >
<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);
}
}
})
}
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相關內容感興趣的讀者可查看本站專題：《JavaScript時間與日期操作技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
