Php jQuery动画don'；如果Ajax请求太快，则无法正常工作

我环顾了一下，还没有找到答案

我有一个ajax请求，当您单击按钮时，它会将信息发送到服务器，隐藏当前div并加载gif。我将其设置为当服务器响应时，不再加载gif并显示来自服务器的内容

代码：

问题是jQuery从服务器接收响应的速度太快，加载的gif并没有消失

---

但是，如果我让服务器休眠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（）。

当然，用户不必看到加载的动画是件好事，因为它太快了

无论如何，问题是动画至少需要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（）。

消除显示等待动画的延迟，这样当请求返回时，动画就不会显示

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

---

如果你把所有这些加起来，那几乎是一秒钟后的事了。到那时，ajax请求可能已在大多数系统中返回，因此不值得在该点之前仍然设置动画

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

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

---

如果你把所有这些加起来，那几乎是一秒钟后的事了。到那时，ajax请求可能已在大多数系统中返回，因此不值得在该点之前继续设置动画

似乎ajax回调是在问题隐藏结束之前执行的，

$（“#waiting”）.show（350）

位于

$（'#waiting'）之后。隐藏（350，…）

。解决这个问题有三种可能：

如果您想立即显示

#waiting

img（不等待问题淡出），则不会发生这种情况；答案也不应该等待——等待隐藏

---

或者，当问题淡出时，使用变量指示答案已淡入，并显示无动画，然后：

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

---

似乎ajax回调是在问题隐藏结束之前执行的，

$（'#waiting'）.show（350）

位于

$（'#waiting'）之后。隐藏（350，…）

。解决这个问题有三种可能：

如果您想立即显示

#waiting

img（不等待问题淡出），则不会发生这种情况；答案也不应该等待——等待隐藏

---

或者，当问题淡出时，使用变量指示答案已淡入，并显示无动画，然后：

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

使用Javascript的。代码可能看起来（可能不完全如此）：

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

使用Javascript。代码可能看起来（可能不完全如此）：

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

“但是如果我告诉服务器睡眠3秒钟，它就工作得很好”，这听起来像是我问题的解决方案。这不是我想要的解决方案。如果可以是即时的，那就好了。我正在尝试为移动连接的用户进行优化，因此可能需要一个加载条。我不想故意让用户等待3秒钟才能得到答案。如果响应立即返回，有什么问题？如果用户没有等待很长时间，为什么需要显示“正在加载”的图像？不要使用动画来显示正在等待的动画，而是使其显示（）而不带时间参数“但是如果我告诉服务器睡眠3秒钟，它工作得很好”，这听起来像是解决问题的方法。这不是我想要的解决方案。如果可以是即时的，那就好了。我正在尝试为移动连接的用户进行优化，因此可能需要一个加载条。我不想故意让用户等待3秒钟才能得到答案。如果响应立即返回，有什么问题？如果用户没有等待很长时间，为什么需要显示“加载”图像？不要使用动画