在JS+WCF中如何實現監測數據加載量

來源：懂視網責編：小采時間：2020-11-27 19:36:21

在JS+WCF中如何實現監測數據加載量

在JS+WCF中如何實現監測數據加載量:這篇文章主要介紹了JS+WCF實現進度條實時監測數據加載量的方法,結合實例形式分析了大量數據導入過程中前臺js與后臺WCF交互實現實時顯示加載進度的相關操作技巧,需要的朋友可以參考下本文實例講述了JS+WCF實現進度條實時監測數據加載量的方法。分享給大家供大

推薦度：

點擊下載本文 文檔為doc格式

導讀在JS+WCF中如何實現監測數據加載量:這篇文章主要介紹了JS+WCF實現進度條實時監測數據加載量的方法,結合實例形式分析了大量數據導入過程中前臺js與后臺WCF交互實現實時顯示加載進度的相關操作技巧,需要的朋友可以參考下本文實例講述了JS+WCF實現進度條實時監測數據加載量的方法。分享給大家供大

這篇文章主要介紹了JS+WCF實現進度條實時監測數據加載量的方法,結合實例形式分析了大量數據導入過程中前臺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可以

小結