Javascript Chrome中同步AJAX调用冻结之前的代码

我想在执行同步AJAX调用时将按钮更改为加载状态。除了将按钮更改为加载状态的jQuery代码（在Chrome中）冻结，直到AJAX调用完成。因此，加载状态将在de ajax调用后显示大约1毫秒

我在JSFIDLE中创建了一个示例来检查它。（签入Chrome）

---

将其更改为异步调用会起作用，但目前需要做很多工作。有人有解决方案吗？谢谢

以下是创建预期行为的代码，您希望从按钮中删除：

$('.button').on('click', function()
{
// change button text (DOESN'T SHOW)
$(this).html('Loading..');
// Let's disable the button to prevent further clicks.
$(this).('attr','disabled');

// do async call
$.ajax({
    url: 'http://echo.jsontest.com/insert-key-here/insert-value-here/key/value',
    dataType: "json",
    success: function(poResponse){
        //Ajax is successful, we can enable the button again.
        setTimeout(function() { 
             $(this).removeAttr('disabled');
             $(this).html('Done');
        }, 1000);
    },
    error: function(){
        //So there was an error, let's enable the button & let the user know (so wise of us)
        setTimeout(function() { 
             $(this).removeAttr('disabled');
             $(this).html('Error occured, Try Again');
        }, 1000);
    }

});

// put Click here back after a second, for repeation of the test
setTimeout(function() { $('.button').html('Click here'); }, 3000);
});

---

有关说明，您可以查看：

调用运行之前的代码，但这并不意味着您将 立即看到结果。如果电话是真实完整的 同步，窗口更新可能要在$.ajax之后才会发生 通话结束

如果坚持使用不推荐使用的同步ajax调用，可以执行以下操作：

// change button text
$(this).html('Loading..');

// do async call
setTimeout(function () {
    $.ajax({
        url: 'http://echo.jsontest.com/insert-key-here/insert-value-here/key/value',
        async: false,
        dataType: "json",
        success: function (poResponse) {
            console.log(poResponse);
        }
    });
    // change button text
    $('.button').html('Done');
}, 20);

更新

请注意，异步版本在这里非常简单：

// change button text
$(this).html('Loading..');

// do async call
$.ajax({
    url: 'http://echo.jsontest.com/insert-key-here/insert-value-here/key/value',
    async: true,
    dataType: "json",
    success: function (poResponse) {
        // change button text
        $('.button').html('Done');
        console.log(poResponse);
    }
});

---

async:false

将阻止javascript执行，直到

ajax

调用完成。行为是正确的。我理解，但第一个更改是在ajax调用之前？请参阅我的答案，了解您希望按钮的预期行为：）除非您调用同一对象上的排队项，否则您的

delay（）

调用不会执行任何操作。您应该做的是将整个

$.ajax

放入另一个

setTimeout

中，间隔很短。这将给UI一个更新的时间。@iceless这是真的，但在我的情况下，这是一个解决办法。谢谢@cookiemonster！我知道我可以用异步调用解决它，但这不是问题所在。问题是，同步通话还有其他方式吗？我读了一些关于JQuery的文章。例如Deferer。请告诉我们为什么要使用同步呼叫？我们可以解决这个问题。我在问题中已经说过：“将其更改为异步调用会起作用，但目前会有很多工作。”我知道异步很容易，但是重写超过30个对async的同步调用需要一段时间。@pascalvgemert你最好开始：）我不知道async=true或false可以帮助我在chrome和IE上显示加载程序。非常感谢。

// change button text
$(this).html('Loading..');

// do async call
$.ajax({
    url: 'http://echo.jsontest.com/insert-key-here/insert-value-here/key/value',
    async: true,
    dataType: "json",
    success: function (poResponse) {
        // change button text
        $('.button').html('Done');
        console.log(poResponse);
    }
});