一、前端模拟
将一个完整的请求人为划分为几段,分配每段的百分比,进行到那一段,进度条就滑动到对应的百分比。不涉及后台,仅前端模拟。
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值读取数据。
原文:https://www.cnblogs.com/jpflll/p/11789605.html