java后端写了个for循环,需要处理几十万条数据,前端需要等待很长时间,默认的loading等待弹窗就不大适用了,会让人误以为页面卡住了,所以整了个进度条来实时显示for循环执行进度。
前端代码,需要引入layui.element:
layui.use('element', function () {
var element = layui.element;
//弹出进度条
var progressLayer = layer.open({
type: 0,
title: false,
closeBtn: 0,
btn: false,
content: '<div class="layui-progress layui-progress-big" lay-filter="progress" lay-showpercent="true"><div class="layui-progress-bar"></div></div>'
});
//ajax每隔一秒向后端请求一次进度异步渲染进度条
var scanTime = 1000;
var timer = setInterval(function (){
$.ajax({
url: "/distributor/exportStatus",
success: function (data) {
var arr = data.split(",");
if(arr.length == 2){
var percent = arr[1];
element.progress('progress', percent +'%')
if(percent == 100){
//进度到100%,注意关闭定时器
clearInterval(timer);
//关闭弹出层
layer.close(progressLayer);
layer.closeAll();
layer.msg('保存成功')
}
}
},
error: function (e) {
//关闭定时器
clearInterval(timer);
//关闭弹出层
layer.close(progressLayer);
layer.msg("保存失败");
layer.closeAll();
}
});
}, scanTime);
})
后端代码逻辑:获取for循环每次循环的索引,然后比上总数获得当前进度,然后存到session里面,供前端不停调用,代码如下:
// 接收 HttpServletRequest request
HttpSession session = request.getSession();
//定义double类型,用于保存当前百分比
double currentPercent;
//int类型,进度条显示的百分比
int percent = 0;
for (int i = 20; i < celldataArray.size(); i += 20)) {
currentPercent=((double)i/celldataArray.size())*100;
//因为百分比定义的为整数型,所以每次当前百分比和进度条显示的百分比之间差值大于1才更新
if((int) Math.floor(currentPercent) - percent >= 1) {
percent = (int)Math.floor(currentPercent);
if (percent>=99){
percent=100;
}
//"write,数值形式"方便显示
session.setAttribute("exportStatus", "write," + percent);
}
}
/**
* 查询当前导出的进度(用于进度条显示)
* @return
*/
@RequestMapping("/exportStatus")
@ResponseBody
public String exportStatus(HttpServletRequest httpServletRequest) {
return (String) httpServletRequest.getSession().getAttribute("exportStatus");
}
效果图: