業務需求：

上傳資源，由於某種原因必須用到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();    //隱藏遮罩層
            }
        })
    });    
}
 

注：前端菜鳥，歡迎大佬指正。