ajax请求加上loading遮罩遇到的坑

柔情只为你懂 2022-03-18 09:48 340阅读 0赞

本文起源于我之前写过的包含文件上传的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请求默认是异步的。

我的代码其实没必要进行同步的，因为我不需要拿到返回值去进行其他的操作，特此记录一下，提醒自己注意代码的严谨性，多思考。这次踩坑经历也算是给自己的一个提醒吧。  
\---------------------  
作者：一个懒惰的羊  
来源：CSDN  
原文：https://blog.csdn.net/qq\_23543983/article/details/82222631  
版权声明：本文为博主原创文章，转载请附上博文链接！