今天在做大数量处理时,准备使用循环 post传输,返回结果调用进度条。
结果遇到了post同步处理时,使用的layer是否弹窗时,无法关闭的情况。
整体流程如下:
第一步 :使用layer弹窗,询问是否处理以下数据.
第二步 :加载进度条。
第三步 :循环处理数据,ajax发送到后台,返回结果,同时进度条变更。
第四步:成功后弹窗提示成功与失败数据。
第一次:(发现问题)
发现ajax是异步,数据显示不正确
修改为同步再ajax配置中 增加 async:false.
结果:layui弹窗不关闭,进度条完全被覆盖不显示。
第二次:(寻找解决办法:失败)
百度与去官方论坛寻找,发现layer确实有如此问题,暂时无解决办法。
第三次:(自己尝试:失败)
尝试使用控件元素事件。
当关闭layer事件执行后,调用其他元素的点击事件,来触发数据处理。
失败无效,发现点击事件一样需要同步等待。
第四次:(尚未尝试)
准备尝试使用赋值给一个隐藏本文框,然后监听其变化事件,当变化后执行数据处理。
未完成,突然想到可以使用异步判断是否ajax都已经返回,直接撤回代码。改回异步从新尝试。
第五次:(失败)
定义一个变量resultCount,每次返回后resultCount++;
当resultCount==count(list)时执行数据处理。
结果:异步处理首先执行数据处理代码,而后判断失败。
第六次:
加入定时器,setInterval,0.5秒一次判断是否全部已经返回 resultCount==count(list) 。
基本成型,还有个小问题是进度条还再循环中,进度读取失败。
第七次。
将进度条挪到定时器中,简短性加载进度条。
完成。
以下是代码:
layer.open({
content: content,
btn: ['确认', '取消'],
yes: function(index, layero){
layer.close(index);
var lenthList = list.length;
var resultCount = 0;
//加载进度条
processbar(0,lenthList);
for(var i=0;i<lenthList; i++){
$.ajax({
type : "post",
url : url,
data : {id:list[i]},
dataType : 'json',
success : function(data){
resultCount++;
processData(); //处理数据
}
})
}
//定义定时器
var timer = setInterval(function(){
processbar(resultCount,lenthList);
if(resultCount==lenthList){
clearInterval(timer);
showMessage('完成');
}
}, 500);
},
btn2: function(index, layero){
layer.close(index);
}
})
后记:ES6后 推荐使用 Promise 当然也可以 async/await