layer.load()不及时显示

今天在登录WEB系统时，发现由于系统嵌入RSA AES 数据加密，数据解密过程消耗时间过长。

所以本着用户体验为第一原则，加入了layer.load();

function lodingUtil(t) {
            if (t) {//如果是true则显示loading
                //loding状态
                loading = layer.load(2, { //icon支持传入0-2
                    shade: [0.3, 'gray'], //0.5透明度的灰色背景
                    content: '登录中...',
                    success: function (layero) {
                        layero.find('.layui-layer-content').css({
                            'padding-top': '39px',
                            'width': '60px'
                        });
                    }
                });
            } else {//如果是false则关闭loading
                layer.close(loading);
            }
        }

加入后发现 load()并不会直接显示，有1-2秒空白期，本宝总结了以下的原因：

JavaScript是单线程执行的，无法同时执行多段代码。当某一段代码正在执行的时候，所有后续的任务都必须等待，形成一个队列。一旦当前任务执行完毕，再从队列中取出下一个任务，这也常被称为 “阻塞式执行”。所以一次鼠标点击，或是计时器到达时间点，或是Ajax请求完成触发了回调函数，这些事件处理程序或回调函数都不会立即运行，而是立即排队，一旦线程有空闲就执行。假如当前 JavaScript线程正在执行一段很耗时的代码，此时发生了一次鼠标点击，那么事件处理程序就被阻塞，用户也无法立即看到反馈，事件处理程序会被放入任务队列，直到前面的代码结束以后才会开始执行。

简单一句话：只要同步，ajax就会阻塞ui线程，使得loading显示不出来。
所以我们只需要把ajax 的请求更改为 异步

$.ajax({
                    type : 'post',
                    url : '${ctx}/login/login.action',
                    data : {
                        "a": a
                        , "b": b
                    },
                    dataType : "json",
                    async : true,
                    cache : false,
                    success : function(data) {
                        //关闭加载层
                        lodingUtil(false);//加载
                    }
                })

问题就完美的解决了。