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

本文起源于我之前写过的包含文件上传的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 
版权声明：本文为博主原创文章，转载请附上博文链接！