jQuery show（）在Internet Explorer / Chrome中被延遲

Question

我有一個“處理中...” div疊加層，在進行ajax調用之前顯示為$（''）。show（），並在完成時隱藏。 我遇到的問題是，如果我想顯示div，然后在再次隱藏div之前進行幾次ajax調用，似乎在Internet Explorer（7）和Chrome（2.0.172.39）中將事件排隊，但是我在Firefox（3.0.13）中獲得預期的結果。 當只有一個ajax調用時，它可以正常工作。 代碼是這樣的：

<div id="foo">processing...</div>
<button onclick="performSingle()" />  <-- This behaves like it's supposed to
<button onclick="performMultiple()" /> <-- This queues the events in IE/Chrome.

<script>
$(document).ready(function(){
    $('#foo').hide();
});

function singleAjaxCall() {
    $.ajax({
        url: ...,
        type: "GET",
        async: false, //There is a reason for this.
        success: function() {}
    });
}

function multipleAjaxCalls() {
    singleAjaxCall();
    singleAjaxCall();
    singleAjaxCall();
    singleAjaxCall();
    singleAjaxCall();
    singleAjaxCall();
    singleAjaxCall();
    singleAjaxCall();
}

function performSingle(){
    $('#foo').show();
    singleAjaxCall();
    $('#foo').hide();
}

function performMultiple(){
    $('#foo').show();
    multipleAjaxCalls();
    $('#foo').hide();
}
</script>

Answer 1

也許您應該通過附加單個ajax調用的complete事件來發出信號處理信號？ 如果您菊花鏈式連接了您的ajax調用，這將迫使它進行序列化並按照我認為您希望的方式運行。 確保完全隱藏了final方法，因為ajax調用不會阻塞。

Answer 2

表演結束后，您可以附加一個函數來調用。

$('#foo').show( 0, function(){multipleAjaxCalls();} )

http://docs.jquery.com/Effects/show

Answer 3

是的，嘗試嵌套您的Ajax調用。 像這樣-

function singleAjaxCall() {
    $.ajax({
        url: ...,
        type: "GET",
        async: false, //There is a reason for this.
        success: myCallback1
    });
}


function myCallback1($data)
{
    if(some condition){
    performSingle();
    }
}

Answer 4

如果async設置為false，則無法成功， 這里和這里都很好地解釋了原因。

當您將async設置為false時，無論您之前做什么，瀏覽器都會凍結。 您應該異步處理ajax調用，從而修改您的代碼（也許您也可以看看此線程 ）。