jquery遮罩层不显示问题，涉及线程互斥

第二次遇到了，记录下
业务需求：
上传资源，由于某种原因必须用到ajax同步去上传。上传时耗时较长，为避免用户再上传过程中误操作，需要加遮罩层。

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

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

如果设为同步（async:false），遮罩层不显示。

原因：浏览器引擎分为 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();    //隐藏遮罩层
            }
        })
    });    
}