JS+WCF实现进度条实时监测数据加载量方法

JS与WCF配合实现进度条实时监测数据加载量的方法详解

本文详细介绍了一种结合JavaScript与WCF（Windows Communication Foundation）技术，实现数据加载进度条实时监测的方法。该方案旨在解决大数据量导入过程中的用户体验问题，供相关开发者参考。

背景

在项目开发中，面临将海量数据导入Memcache缓存的需求。

具体场景中，需要通过WCF接口获取约11万条数据。由于涉及多级联表查询及排序操作，后端处理耗时较长，大约需要1分钟。

与此同时，前端需要对获取的数据进行逻辑处理，将其合并精简为2万条数据并执行存储操作，这一过程同样需要约1分钟。

综合上述步骤，整个数据导入流程预计耗时约1分30秒。

为了提升用户体验，需要引入进度条来实时展示数据的处理进度。

此前采用的方案仅为一个动态加载图标，用户无法知晓程序的具体完成比例，甚至难以判断程序是否卡死，只能被动等待。

功能设计

核心功能包括两点：一是开辟独立线程用于后台数据的加载与处理；二是前端通过实时轮询后台数据，动态渲染显示进度。

代码实现

视图层HTML结构


@* 数据准备进度条 *@
  <div id="container">
    <div class="content">
      <h1>数据准备</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>数据准备完成！</p>
    </div>
  </div>

视图层JavaScript逻辑


$(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);
        }
      }
    })
}

控制器层代码


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. 进度条UI生成

解决方案：采用现有的开源Demo，通过CSS结合JavaScript动态生成进度条样式，只需根据数据更新宽度即可实现视觉效果。

2. 线程管理问题

解决方案：初期尝试在监测线程中执行，后调整为在专门的处理数据线程中执行，以优化资源分配。

3. 实时监测机制

解决方案：数据处理线程自动运行，前端通过Ajax定时查询后台的一个全局变量 `load_data_amount` 来获取当前处理进度。

4. Ajax请求报错问题

注意事项：需关注返回值的类型，以及访问属性是 `result` 还是 `result.d`，具体取决于WCF的配置及序列化方式，不同环境下取值方式可能不同。

5. 数据类型精度问题

解决方案：计算完成百分比的公式为“完成量/总量”。由于数据量高达11万，使用 `int` 类型进行运算可能导致溢出或精度丢失，因此改用 `double` 或 `float` 类型以确保计算准确。

小结

最初设想是通过开启线程、添加变量并返回前台，配合进度条读取变量即可简单实现。

然而在实际开发中，涉及MVC框架、Spring框架以及各类接口的交互，原有方法往往存在兼容性问题。此外，Ajax调用及中间运算逻辑也需逐一排查。通过分而治之的策略，逐个解决技术难点，最终实现了稳定运行。

总结而言，采用分而治之、逐个击破并充分测试的方法，是解决复杂集成问题的有效途径。

另外，虽然框架和协作工具带来了开发便利，但其中隐藏的限制和Bug也可能显著降低开发效率，需保持警惕。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望本文所述的JS与WCF配合实现进度条监测的方法，对大家的前端与后端交互程序设计有所帮助。

JS与WCF配合实现进度条实时监测数据加载量的方法详解

JS与WCF配合实现进度条实时监测数据加载量的方法详解

背景

功能设计

代码实现

遇到的问题及解决方案

小结

实用工具推荐