如果Ajax請求過快，jQuery動畫無法正常工作

Question

我已經環視了一下，但還沒有找到答案。

我有一個ajax請求，當你點擊按鈕它發送信息到服務器，並隱藏當前div並加載加載gif。我已經設置，所以當服務器響應它擺脫加載gif並顯示從服務器的內容。

代碼：

$("#submit").click(function(e){ 
    e.preventDefault(); 
    var $domain = $.fn.HTTP($('#domain').val()); 
    if(!$.fn.ValidURL($domain)){ 
     $('#domainerror').fadeIn(500); 
     return false; 
    } 

    if($('#domainerror').css('display')!=='none'){ 
     $('#domainerror').fadeOut(350); 
    } 

    $('#question').hide(500, function(){ 
     $('#waiting').show(350); 
    }); 

    $.getJSON('http://localhost/file.php', 
    { 
     i: $domain 
    }, 
     function(data){ 
     $('#answer').html(data.message + $('#trybutton').html()); 
     $('#waiting').hide(350, function(){ 
      $('#answer').show(350); 
     }); 
    }); 
}); 

的問題是jQuery的從服務器接收過快，加載GIF不會消失的響應。

但是，如果我告訴服務器休眠3秒，它工作得很好。這不是我想要的解決方案。

任何想法？

Answer 1

當然，這是一件好事，你的用戶不必看到加載動畫，因爲它太快了！

無論如何，問題在於動畫需要至少500毫秒 - 動畫是異步處理的，與您的AJAX請求同時進行。在發送AJAX請求之前，不要讓服務器進入休眠狀態，這可能會浪費CPU，而是讓瀏覽器等待。

放在一個setTimeout()函數的調用，這個例子將使其等待3秒鐘：

setTimeout(function() { 
    $.getJSON('http://localhost/file.php', 
    { 
     i: $domain 
    }, 
    function(data){ 
     $('#answer').html(data.message + $('#trybutton').html()); 
     $('#waiting').hide(350, function(){ 
      $('#answer').show(350); 
     }); 
    }); 
}, 3000); 

理想的解決方案但將不使用動畫效果，只需使用展（）和隱藏（）。

Answer 2

擺脫顯示等待動畫的延遲，所以當請求返回時它不會顯示出來。

$('#question').hide() //was 500 
$('#waiting').show(); //was 350 

如果您將所有這些都添加完畢，差不多一秒後。到那時Ajax請求可以在大多數系統已恢復，因此它不值得是仍然受到點

Answer 3

好像AJAX回調的問題隱藏結束前執行，並且$('#waiting').show(350);來$('#waiting').hide(350, ...)後動畫。您可以使用三種方法解決：

如果你顯示的#waiting IMG immidiately（不等待淡出的問題），這將不會發生;那麼答案也不應該等待＃等待隱藏。

---

或者你使用一個變量來表示，答案已經在當問題已經淡出褪色，並顯示沒有動畫則：

var answered = false, 
    waiting = false; 
$('#question').hide(500, function(){ 
    if (!answered) { 
     waiting = true; 
     $('#waiting').show(350); 
    } 
}); 

$.getJSON('http://localhost/file.php', { 
    i: $domain 
}, function(data){ 
    $('#answer').html(data.message + $('#trybutton').html()); 
    answered = true; 
    if (waiting) { 
     $('#waiting').stop().hide(350, function(){ 
      $('#answer').show(350); 
     }); 
    } else { 
     $('#answer').show(350); 
    } 
}); 

---

如果你想四個動畫總是顯示和連續（至少1550ms），您需要手動對其進行編碼：

var showanswer = false; 
$('#question').hide(500, function() { 
    $('#waiting').show(350, function() { 
     if (showanswer) // already loaded 
      showanswer(); // execute callback 
     else 
      showanswer = true; // mark as shown 
    }); 
}); 

$.getJSON('http://localhost/file.php', { 
    i: $domain 
}, function(data){ 
    $('#answer').html(data.message + $('#trybutton').html()); 
    function animate() { 
     $('#waiting').hide(350, function(){ 
      $('#answer').show(350); 
     }); 
    } 
    if (showanswer) // waiting image shown 
     animate(); 
    else 
     showanswer = animate; // set as callback 
}); 

Answer 4

使用Javascript的setTimeout。代碼可能看起來（也許不完全）是這樣的：

setTimeout("getResponse()", 3000); 

function getResponse() { 
    $.getJSON('http://localhost/file.php', 
    { 
     i: $domain 
    }, 
     function(data){ 
     $('#answer').html(data.message + $('#trybutton').html()); 
     $('#waiting').hide(350, function(){ 
      $('#answer').show(350); 
     }); 
    }); 
} 

你有你的AJAX請求仍然發送您的i變量的服務器，處理代碼file.php和發回的數據通過這種方式，你可以處理。唯一的竅門是把它放在一個函數中（不是必需的，但它確實使setTimeout函數看起來更漂亮），並在3000毫秒後調用它。