JS+WCF实现进度条功能-js教程-PHP中文网

JS+WCF实现进度条功能

小云云

发布： 2017-12-20 09:37:47

原创

1423 人浏览过

本文主要介绍了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 () {
    $(&#39;#initialization&#39;).click(function () {
      $.messager.confirm(&#39;提示&#39;, &#39;是否要进行数据初始化？&#39;, function (r) {
        if (!r) {
          return;
        }
        else {
          $(&#39;#container&#39;).show();
          var t1 = window.setInterval(process_bar, 1500);
        }
      });
    });
});
function process_bar() {
    $.ajax({
      type: "POST",
      async: true,
      url: "/Paper/LoadData",
      success: function (result) {
        $(&#39;#progress_bar .ui-progress&#39;).animateProgress(result);
        if (result =="100") {
          $(&#39;#main_content&#39;).slideDown();
          $(&#39;#fork_me&#39;).fadeIn();
          setTimeout(function () { $(&#39;#container&#39;).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可以