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);
    }
});

如果您希望四个动画始终显示和连续（至少1550毫秒），则需要手动编码：

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

如果Ajax请求太快，jQuery动画无法正常工作

4 个答案: