本文起源于我之前写过的包含文件上传的form表单提交。在上述代码中关于ajax提交是同步还是异步的问题我也没有关注,结果在添加遮罩的时候就遇到问题了。
问题描述:在点击保存提交文件表单数据时,由于加载速度慢,容易给用户系统出错或崩溃的错觉,造成用户多次点击等情况,所以考虑添加loading遮罩,我的ajax请求代码如下,在success之前添加brforeSend:
$.ajax({
url: "${basePath}/itemRFID/upload",
type: 'post',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
beforeSend: function () {
loading("数据提交中,请稍后......");
},
success: function (result) {
//判断数据是不是成功修改
if (result['code'] == 'SUCCESS') {
layer.msg("上传成功");
layer.close(index);
table.reload('idTest', {});
} else {
layer.msg(result['message'], {time: 2000});
return false;
}
},
error: function (data) {
alert("网络请求失败,请重试!");
}
})
loading方法:
function loading(msg){
layer.msg(msg, {
icon:16,
shade:[0.1, '#fff'],
time:false //不自动关闭
})
}
但是当点击保存时并没有出现预期的结果。
解决思路:问题就出在ajax被我设置成同步了,浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题,但当设置为同步请求时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。
处理结果:async:true或者直接删掉,因为ajax请求默认是异步的。
我的代码其实没必要进行同步的,因为我不需要拿到返回值去进行其他的操作,特此记录一下,提醒自己注意代码的严谨性,多思考。这次踩坑经历也算是给自己的一个提醒吧。