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

jQuery animations don't work correctly if Ajax request is too fast

本文关键字：常工作 工作 请求 Ajax 动画 jQuery 如果      更新时间：2023-09-26

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

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

有什么想法吗？

当然，

您的用户不必看到加载动画是一件好事，因为它太快了？！

无论如何，问题是动画至少需要 500 毫秒 - 动画是异步处理的，与您的 AJAX 请求同时进行。不要让服务器进入睡眠状态（这可以说是浪费 CPU），而是让浏览器在发送 AJAX 请求之前等待。

将调用放入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（）。

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

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

如果你把所有加起来，那几乎是一秒钟后。到那时，ajax 请求可能已经在大多数系统中返回，因此到那时仍然进行动画处理是不值得的。

使用 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 变量发送到服务器，处理文件中的代码.php并发回您可以处理的数据。 唯一的技巧是将其放入一个函数中（不是必需的，但它肯定会使setTimeout函数看起来更漂亮），并在 3000 毫秒后调用它。

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

如果你不时地展示#waiting img（而不是等待问题淡出），这不会发生;答案也不应该等待 #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
});
相关文章：