本文主要介紹了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中文網其他相關文章!