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链接时，它会更新两个DIVS（一个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/

Answer 2

您可以使用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的所有数据而不是必须对数据进行二次调用。

Answer 3

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

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

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

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

Answer 4

使用setInterval而不是setTimeout。如果不再需要，可以使用clearInterval将其删除。

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

延迟AJAX加载？

4 个答案: