php - 延迟 AJAX 加载？

Question

我正在编写一个基于 PHP 的在线幻想宠物模拟游戏。我对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 - 该 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 包含用户喂食/饮水/与宠物玩耍时显示的消息，另一个包含状态栏)。现在...似乎一切都很好，但是...如果两个脚本完全同时更新，则处理状态栏的 PHP 不会更新 - 它仍在检索旧信息。

我向大家提出的问题是:有什么办法可以延迟运行第二组脚本(以便在 PHP 对 MySQL 进行更改后它会更新)？

我尝试在“几乎可以工作的脚本”之前插入此内容:

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

但是，它不起作用。嗯——确实如此，但只有一次。用户每天至少需要和他们的宠物一起玩 3 次才能获得 100% 的幸福感，因此仅延迟一次第二个 DIV 对我来说并没有什么意义。当我尝试多次添加相同的脚本时，它就停止工作了。我能做什么？!

如果您想查看运行情况的屏幕截图，请直接询问。我很乐意根据要求提供它们。

提前谢谢您!

Answer 1

您也许可以使用第一个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/