我在修改以前的项目时，前辈居然使用了ajax同步属性，使我大为震惊。因为使用同步后，页面无法任何操作，只能等请求完成才能执行其他函数，这个问题让我好找啊！
ajax同步属性
什么是ajax同步属性
我们使用ajax都是看中它是异步请求，但有时候，项目需要先ajax获取到数据后再执行其他函数，这时就需要ajax同步，但现在都是使用async、await，所以ajax使用同步属性浏览器会报警告。
下面代码将很清楚知道ajax同步属性是什么：
<body>
<div id="test" style="display: none;">123</div>
<button onclick="sub()">提交</button>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function sub(){
$('#test').show("slow")
$.ajax({
url: 'http://phpsocket.sinye.xyz/api/ip',
type: "get",
async: false, // ajax同步属性。false为同步，true为异步。
dataType: 'json',
success: function (data) {
console.log(data)
$('#test').hide("slow")
},
error: function() {
console.log(false)
$('#test').hide("slow")
},
})
}
</script>
为什么jq会弃用并警告
因为现在新增了promise、async、await异步解决方案，而jq再去封装不利于程序员对异步同步的控制。jq的ajax同步属性直接导致页面js的停止，特别是有jq动画的时候，直接导致动画停止。比如上面代码，当我点击提交的时候，$('#test').show("slow")这段代码会在ajax执行完成后执行，ajax强行插入到同步队列里。由于js是单线程，就导致整个页面都在等待ajax。
ajax同步的正确用法
使用promise、async、await异步解决方案。
<body>
<div id="test" style="display: none;">123</div>
<div id="num">0</div>
<button onclick="sub()">提交</button>
</body>
<script>
$("#num").click(function(){
this.innerText = ++this.innerText
})
async function sub(){
$('#test').show("slow")
await new Promise((resolve,reason)=>{
$.ajax({
url: 'http://phpsocket.sinye.xyz/api/ip',
type: "get",
dataType: 'json',
success: function (data) {
console.log(data)
resolve(true)
},
error: function() {
console.log(false)
reason(false)
},
})
})
$('#test').hide("slow")
}
</script>