快捷導(dǎo)航

JS+WCF實現(xiàn)進度條實時監(jiān)測數(shù)據(jù)加載量的方法詳解

更新時間：2017年12月19日 13:49:17 作者：Francis-李鑫超

這篇文章主要介紹了JS+WCF實現(xiàn)進度條實時監(jiān)測數(shù)據(jù)加載量的方法,結(jié)合實例形式分析了大量數(shù)據(jù)導(dǎo)入過程中前臺js與后臺WCF交互實現(xiàn)實時顯示加載進度的相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了JS+WCF實現(xiàn)進度條實時監(jiān)測數(shù)據(jù)加載量的方法。分享給大家供大家參考，具體如下：

背景

由于項目中需要導(dǎo)入大量數(shù)據(jù)到memcache中

需要用WCF調(diào)取11萬條數(shù)據(jù)，由于那邊多級聯(lián)查和排序，所以比較慢（1分鐘左右）

同時這邊需要對數(shù)據(jù)進行處理，合并成2萬條數(shù)據(jù)，然后存儲，需要一定時間（也是1分鐘左右）

總之，完成這個數(shù)據(jù)導(dǎo)入一共需要1分30秒左右

這時候，需要一個進度條來實時監(jiān)測完成的數(shù)據(jù)量

（之前用的是一個動態(tài)圖，不能知道程序目前的完成量，甚至不知道它是不是卡住了，只能等著）

功能

1.開辟線程，用于加載數(shù)據(jù)，處理數(shù)據(jù)
2.前臺實時讀取后臺數(shù)據(jù)，并顯示

代碼

view-html

@* 數(shù)據(jù)準(zhǔn)備進度條 *@
  <div id="container">
    <div class="content">
      <h1>數(shù)據(jù)準(zhǔn)備</h1>
    </div>
    <!-- Progress bar -->
    <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%</b></span>
      </div>
    </div>
    <!-- /Progress bar -->
    <div class="content" id="main_content" style="display: none;">
      <p>數(shù)據(jù)準(zhǔn)備完成！</p>
    </div>
  </div>

view-js

$(function () {
    $('#initialization').click(function () {
      $.messager.confirm('提示', '是否要進行數(shù)據(jù)初始化？', 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;//當(dāng)前數(shù)據(jù)準(zhǔn)備量
public bool initializeData()
{
  bool flag = false;  //定義返回值
  //獲得數(shù)據(jù)
  //code....code ....code....
  load_data_amount = 5;//完成工作量
  int page = 0;
  int amount = 50000;//一次獲取數(shù)據(jù)量不能超過10萬
  while (page * amount == list.Count)
  {
    //code....code ....code....
    load_data_amount = load_data_amount + 5;
  }
  load_data_amount = 50;//讀取數(shù)據(jù)默認(rèn)的工作量
  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;//根據(jù)數(shù)據(jù)改變的完成工作量
  }
  load_data_amount = 100;//完成工作量
  flag = true;
  return flag;
}
//返回當(dāng)前準(zhǔn)備數(shù)據(jù)量
public int LoadDataAmount() {
  return load_data_amount;
}

問題 & 解決

1.進度條生成

解決：使用網(wǎng)上的demo，css+js可以動態(tài)生成，改變數(shù)據(jù)即可

2.線程問題

解決：開始是監(jiān)測使用線程，后來改成處理數(shù)據(jù)使用線程

3.實時監(jiān)測問題

解決：處理數(shù)據(jù)使用線程自動運行，前臺使用ajax不斷查詢后臺的一個變量load_data_amount

4.ajax報錯問題

注意是返回值的類型，以及是result還是result.d，不同情況下是不一樣的

5.數(shù)據(jù)類型問題

解決：讀取數(shù)據(jù)完成的百分比，是用完成量/所有量得到的，這里的數(shù)一直算不對，是因為int類型承受不住11萬的運算以及之后的小數(shù)，用double和float可以

小結(jié)