2

我正在编写一个基于 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 - 包含更新状态栏的那个，显示他们的宠物有多饿/渴/不开心。目前，我正在这样做：

几乎可以工作的脚本

$(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 延迟一次对我来说并不合适。当我尝试多次添加相同的脚本时，它就停止了一起工作。我能做些什么？！

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

先感谢您！

4

4 回答 4

2

您也许可以使用第一个 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-27T21:42:28.517 回答
1

您可以使用该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-27T21:43:21.943 回答
1

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

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

这里有一些关于它的理论:)

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

于 2012-06-27T21:43:27.623 回答
0

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

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

于 2012-06-27T21:40:14.523 回答