首页 > 其他 > 详细

进度条展示实时进度

时间:2019-11-03 23:37:06      阅读:80      评论:0      收藏:0      [点我收藏+]

一、前端模拟

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!