js异步和同步

这个ajax是非常常用的一个方法，今天的业务场景很简单：

image.png

1.点击
2.遮障层显示等待转圈圈
3.后台处理完毕todo（）并且关闭遮障层
同步： async:false
比较一下区别：

    $("#XXXX").click(function(){
        console.time('aa');
        //需要ajax同步处理
        $.ajax({
           async:XX
        });
     console.timeEnd('aa');
    })

异步：aa: 1.43408203125ms
同步：aa: 2137.023193359375ms
差别还是很大的，来看看执行到success中的时间

    $("#XXXX").click(function(){
        console.time('aa');
        //需要ajax同步处理
        $.ajax({
           async:XX，
            success：function(){
                console.timeEnd('aa');
            }
        });
    })

同步：aa: 2179.932861328125ms
异步：aa: 2254.029052734375ms
没什么差别
然后我用同步执行，然而遮障层打开关闭就有问题了

    $("#XXXX").click(function(){
        //打开遮障层
        console.time('aa');
        //需要ajax同步处理
        $.ajax({
           async:false，
            success：function(){
                console.timeEnd('aa');
                //关闭遮障层
            }
        });
    })

这看起来没有什么问题，按顺序执行，但是显示效果却是：
1.点击----2.（未出现遮障层）---3.等待处理---4.关闭遮障层
全程没有打开遮障层这回事。检查div，发现问题是：
第二步其实执行了，但是因为同步执行ajax而无法去渲染页面。
同理回想同步执行ajax的时候，你会发现页面哪儿你都动不了
如何解决？改成异步执行就好了
问题很简单，但是有时间就要多琢磨，尽量知其然知其所以然比较好