我环顾四周,还没有找到答案。
我有一个 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
});