从加载延迟AJAX？

我正在编写一个基于PHP的在线奇幻宠物模拟游戏。我对AJAX不是很熟悉，所以请在回答时记住这一点。从加载延迟AJAX？

在宠物网页上，我希望用户能够在无需重新加载整个页面的情况下喂养/浇水/玩宠物，这就是为什么我使用AJAX。这是我到目前为止有：

工作脚本

$(function() { 

$(".petcareFood").click(function(event) { 
    event.preventDefault(); 
    $("#petcareFood").load($(this).attr("href")); 
}); 

}); 

$(function() { 

$(".petcareWater").click(function(event) { 
    event.preventDefault(); 
    $("#petcareWater").load($(this).attr("href")); 
}); 

}); 

$(function() { 

$(".petcarePlay").click(function(event) { 
    event.preventDefault(); 
    $("#petcarePlay").load($(this).attr("href")); 
}); 

}); 
</script>

工作HTML

<a class=\"petcareFood\" href=\"petcare.php?pet=#&action=#\">Feed Your Pet</a> 
<a class=\"petcareWater\" href=\"petcare.php?pet=#&action=#\">Water Your Pet</a> 
<a class=\"petcarePlay\" href=\"petcare.php?pet=#&action=#\">Play With Your Pet</a>

现在，我在上面像一个魅力的作品上市的一切！这是是我的问题：我想要那些链接也更新另一个DIV - 包含更新的状态栏显示他们的宠物是多饿/渴/不幸。目前，我做的是这样的：

的几乎工作脚本

$(function() { 

$(".petcareFood").click(function(event) { 
    event.preventDefault(); 
    $('#petcareHunger').load('ajax/hunger.php?pet=#'); 
}); 

}); 

$(function() { 

$(".petcareWater").click(function(event) { 
    event.preventDefault(); 
    $('#petcareThirst').load('ajax/thirst.php?pet=#'); 
}); 

}); 

$(function() { 

$(".petcarePlay").click(function(event) { 
    event.preventDefault(); 
    $('#petcareMood').load('ajax/mood.php?pet=#'); 
}); 

});

上面的脚本使得它如此，当用户点击HTML链接之一，它更新两个div（一个DIV包含当用户喂养/水域/玩他们的宠物时显示的消息，另一个DIV包含状态栏）。现在... 似乎一切都很好，但是...但如果两个脚本完全同时更新，那么处理状态栏的PHP不会更新 - 它仍在检索旧信息。

我向大家提出的问题是：有什么办法可以延迟运行第二组脚本（以便在PHP更改MySQL后更新）？

我尝试过“几乎工作脚本”插入这样的：

setTimeout(function() { 
$('#petcareMood').load('ajax/mood.php?pet=#'); 
}, 2000);

但是，这是行不通的。那么 - 它确实，但只是一次。用户需要每天至少玩三次宠物才能达到100％的快乐，所以延迟第二次DIV只能一次不会对我造成伤害。当我多次尝试添加相同的脚本时，它只是停止了所有工作。我能做什么？！

如果您想查看工作情况的截图，请直接询问。我会很乐意根据要求提供。

预先感谢您！

来源

2012-06-27 Connie

而不是setTimeout，请使用setInterval。当不再需要时，你可以使用clearInterval来杀死它。

setInterval将每n毫秒执行一个给定的函数。

来源

2012-06-27 21:40:14

THANK YOU SO MUCH！它像一个魅力一样工作！ = d – Connie

，而不是硬编码的延迟时间，你也许可以使用第一个AJAX动作的回调函数：

//trigger first ajax 
$("#petcarePlay").load($(this).attr("href"), function(){ 
    //trigger second ajax call, when first is completed 
    $('#petcareHunger').load('ajax/hunger.php?pet=#'); 
});

看到http://api.jquery.com/load/

来源

2012-06-27 21:42:28

您可以使用complete参数指定一个回调函数，得到当请求完成时执行。然后从回调中执行另一个实际更新div的请求。

例子：

$(".petcareWater").click(function(event) { 
    event.preventDefault(); 
    $("#petcareWater").load($(this).attr("href"), function(response, status, xhr) { 
     // code here to make another request for stats 
    } 
});

或者，你可以有初始的URL返回包含更新的统计信息，因此，当一个人做的东西/与他们的宠物，它会返回所有的统计信息，因此您可以将某些JSON数据立即用一次呼叫更新div的全部内容，而不必再次调用数据。

来源

2012-06-27 21:43:21 drew010

我不确定，但我认为ajax构造函数更适合您的目的http://api.jquery.com/jQuery.ajax/。

在那里，你可以设置的AJAX将是同步的（它会等待完成AJAX回调）

下面是一些关于它的理论:)

http://javascript.about.com/od/ajax/a/ajaxasyn.htm

来源

2012-06-27 21:43:27

从加载延迟AJAX？

回答

相关问题