如果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);

但是，理想的解决方案是不使用动画效果，而仅使用show（）和hide（）。

Answer 2

摆脱了显示等待动画的延迟，因此当请求返回时它仍然没有显示。

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

如果将所有内容加起来，将近一秒钟。 到那时，大多数系统中可能已经返回了ajax请求，因此到那时仍然不值得动画

Answer 3

好像ajax回调是在问题隐藏结束之前执行的，而$('#waiting').show(350); 在$('#waiting').hide(350, ...) 您可以通过以下三种方式解决该问题：

如果你想显示 #waiting IMG immidiately（而不是等待问题淡出），这将不会发生; 那么答案也不应等待#waiting隐藏。

---

或者，您可以使用一个变量来指示问题消失后答案已经消失，然后不显示动画 ：

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毫秒后调用它。