1

我环顾四周，还没有找到答案。

我有一个 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 秒，它就可以正常工作。这不是我想要的解决方案。

有任何想法吗？

4

4 回答 4

3

当然，您的用户不必看到加载动画是一件好事，因为它是如此之快？！

无论如何，问题在于动画至少需要 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()。

于 2012-07-03T22:25:38.290 回答
2

消除显示等待动画的延迟，因此在请求返回时它仍然不显示。

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

如果你加起来几乎一秒钟后。到那时，大多数系统中的 ajax 请求可能已经返回，所以到那时仍然不值得制作动画

于 2012-07-03T22:26:00.413 回答
0

似乎 ajax 回调是在问题隐藏结束之前执行的，然后$('#waiting').show(350);是$('#waiting').hide(350, ...). 您有三种可能性来解决这个问题：

如果您立即显示#waitingimg （不等待问题消失），这不会发生；答案也不应等待#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
});
于 2012-07-03T22:26:37.463 回答
0

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

于 2012-07-03T22:27:00.567 回答