进度条展示实时进度

一、前端模拟

　　将一个完整的请求人为划分为几段，分配每段的百分比，进行到那一段，进度条就滑动到对应的百分比。不涉及后台，仅前端模拟。

var html = '<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">'
    html += '<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>';
    html += '</div>';
var msgIndex = layer.msg(text, {
    icon: 6,
    area:['300px'],
    shade: 0.4,
    time: false
});
element.render('progress');
var timer = null;
//起始百分比，结束百分比
function proFn(start_val,end_val){
　　var n = start_val;
　　if(timer){
　　　　clearInterval(timer);
　　　　element.progress('demo', start_val+'%');
　　}
　　timer = setInterval(function(){
　　　　n = n + Math.random()*10|0;
　　　　if(n>end_val){
　　　　　　n = end_val;
　　　　　　clearInterval(timer);
　　　　　　if(n == 100){
　　　　　　　　Hussar.success("分析成功!");
　　　　　　　　$('#KqglAttendanceAnalysisTable').bootstrapTable('refresh');
　　　　　　}
　　　　}
　　　　element.progress('demo', n+'%');
　　}, 300+Math.random()*1000);
}

二、桩位法

　　分主Ajac和从属Ajax，主Ajax执行的时候，后台在合适的位置打下点位，并使用一个全局的map记录状态，从属Ajax定时读取点位状态并更新进度条。

　　主Ajax执行前，先在前台生成一个key值并传递到后台存储点位状态的map里面，此时map有了一条value为0的记录。主Ajax执行时携带该key值，并在合适的点位处打点，记录的状态/进度根据key值保存到map里面。（使用全局map是为了解决多并发，每人都有单独的key）。从属Ajax根据key值读取数据。