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执行完成的时候才会显示遮罩层。

解决方案：

1. 设置async为true，异步去访问。
2. 使用jQuery的$("#mask").show(function(){});方法。

function upload(){
    $("#mask").show(function(){    //显示遮罩层，在回调中执行ajax
        $.ajax({
            url:"xxxx",
            async:false,        //同步
            success:function(res){
                $("#mask").hide();    //隐藏遮罩层
            }
        })
    });    
}

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