javascript - JQuery:为什么ajax请求在beforeSend中的代码执行完成之前执行？

Question

这是我的代码。基本上我有一个 Reload.gif，我想在发送 ajax 请求来重新加载数据之前开始在我的页面上播放它。然而最终发生的事情是它只会在调用我的成功函数后才开始播放。时间线是这样的:

0:00 秒:1 已记录到控制台

0:00 秒:2 已记录到控制台

0:10 秒:3 已记录到控制台

0:10 秒:GIF 开始播放。

这没有意义，是设置 img 的 src 异步还是其他什么？ 图片代码:

<img id="reloadIcon" src="/img/Reload.png" style="width: 25px; height: 25px"/>

jQuery.ajax({
    url: url,
    type: 'GET',
    timeout: 20000,
    beforeSend: function() {
        console.log(1);
        document.getElementById('reloadIcon').src = "/img/Reload.gif";
        console.log(2);
    },
    success: function (result) {
        console.log(3);
    }
});

Answer 1

加载$.ajax()之前的图像称呼。切换 CSS display <img>的属性(property)元素位于 beforeSend函数，而不是更改 .src <img>的元素。

jQuery.ajax({
    url: url,
    type: 'GET',
    timeout: 20000,
    beforeSend: function() {
        console.log(1);
        document.getElementById('reloadIcon').style.display = "block";
        console.log(2);
    },
    success: function (result) {
        document.getElementById('reloadIcon').style.display = "none";
        console.log(3);
    }
    , error: function() {
        document.getElementById('reloadIcon').style.display = "none";
    }
});