ajax同步提交时遮罩层不显示

业务需求：

上传资源，由于某种原因必须用到ajax同步去上传。上传时耗时较长，为避免用户再上传过程中误操作，需要加遮罩层。

猜到的坑：

正常情况下，如果是异步是没有任何问题的。

function upload(){ $("#mask").show(); //显示遮罩层 $.ajax({ url:"xxxx", async:true, //异步 success:function(res){ $("#mask").hide(); //隐藏遮罩层 } }) }

如果设为同步，遮罩层不显示。

原因：浏览器引擎分为 js引擎和渲染（UI）引擎。js引擎负责解析js脚本代码，渲染引擎负责渲染页面。当ajax设置为同步时，由于js线程和UI线程是互斥的，当执行ajax的时候，js线程耗时操作，此时会阻塞UI线程，当ajax执行完成的时候才会显示遮罩层。

解决方案：

设置async为true，异步去访问。使用jQuery的$("#mask").show(function(){});方法。 function upload(){ $("#mask").show(function(){ //显示遮罩层，在回调中执行ajax $.ajax({ url:"xxxx", async:false, //同步 success:function(res){ $("#mask").hide(); //隐藏遮罩层 } }) }); }

注：前端菜鸟，欢迎大佬指正。