今天在登录WEB系统时,发现由于系统嵌入RSA AES 数据加密,数据解密过程消耗时间过长。
所以本宝本着用户体验为第一原则,加入了layer.load();
function lodingUtil(t) {
if (t) {//如果是true则显示loading
//loding状态
loading = layer.load(2, { //icon支持传入0-2
shade: [0.3, 'gray'], //0.5透明度的灰色背景
content: '登录中...',
success: function (layero) {
layero.find('.layui-layer-content').css({
'padding-top': '39px',
'width': '60px'
});
}
});
} else {//如果是false则关闭loading
layer.close(loading);
}
}
加入后发现 load()并不会直接显示,有1-2秒空白期,本宝总结了以下的原因:
JavaScript是单线程执行的,无法同时执行多段代码。当某一段代码正在执行的时候,所有后续的任务都必须等待,形成一个队列。一旦当前任务执行完毕,再从队列中取出下一个任务,这也常被称为 “阻塞式执行”。所以一次鼠标点击,或是计时器到达时间点,或是Ajax请求完成触发了回调函数,这些事件处理程序或回调函数都不会立即运行,而是立即排队,一旦线程有空闲就执行。假如当前 JavaScript线程正在执行一段很耗时的代码,此时发生了一次鼠标点击,那么事件处理程序就被阻塞,用户也无法立即看到反馈,事件处理程序会被放入任务队列,直到前面的代码结束以后才会开始执行。
简单一句话:只要同步,ajax就会阻塞ui线程,使得loading显示不出来。
所以我们只需要把ajax 的请求更改为 异步
$.ajax({
type : 'post',
url : '${ctx}/login/login.action',
data : {
"a": a
, "b": b
},
dataType : "json",
async : true,
cache : false,
success : function(data) {
//关闭加载层
lodingUtil(false);//加载
}
})
问题就完美的解决了。