记一次ajax sync为false 同步神坑bug

记一次项目中想要实现一个转圈圈的等待遮罩层

代码如下：

$("#zhezhao").show();
$.ajax({
    url:'',
    data:data,
    sync:false,
    done:{
        $("#zhezhao").hide();
    }
})

自信满满的运行
然而点击查询后页面上什么也没有？？
以为报错了，然后各种调试输出display的值等
怎么都出不来
但是在浏览器F12调试模式下打断点，执行到show()，再下一步，哎他出来了！然后再点下一步 等到请求返回，执行done的回调时也能隐藏！！

这他喵的这是什么奇葩bug，以为是有其它代码将这个框隐藏掉了，然后直接注释掉原来HTML代码，新建一个div，起名新的ID，新的代码

然后我又来试了，然而 它喵的还是那样，F12调试模式能出来，正常执行不出来，崩溃了一下午没弄出来，暂时先弄别的去了

后来第二天，知道这块代码不行，就先注释吧，高潮来了，我一注释，发现等待框它出来了！！

然后就细细的看这段代码没什么特别的啊，把ajax注释掉试一下，发现正常显示和隐藏等待框，ajax有问题，逮到真凶了

就看这个ajax，仔细想来是不是同步的问题？
把sync:false注释掉，发现可以显示隐藏！！！

$("#zhezhao").show();
$.ajax({
    url:'',
    data:data,
    //sync:false,
    done:{
        $("#zhezhao").hide();
    }
})

好嘛，仔细想想可能是因为同步会阻塞线程让线程等待请求执行完成

原因：

那我的框为什么不显示呢，一开始调用了show()，也就是display设为block, display的值已经改了（输出验证过），
但是JavaScript执行引擎因为同步阻塞的原因他没有立即执行刷新dom操作，然后等到我的请求回来，我的框的display的值又给改回去了，所以相当于没有显示！！！

解决方案：

1. sync改为true

2. 如果true不满足需求，你可以使用setTimeOut(),
   将时间设置为几毫秒后执行，这个时间自己看着设

$("#zhezhao").show();
setTimeOut(function({
    $.ajax({
        url:'',
        data:data,
        sync:true,
        done:{
            $("#zhezhao").hide();
        }
    })
}),100)

3. 使用alert

alert弹框会让JavaScript执行引擎去执行渲染dom操作