延迟 AJAX 加载 - Delay AJAX from loading?

我正在编写一个基于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>

工作网页

<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 包含用户喂食/浇水/与宠物玩耍时显示的消息，另一个包含状态栏）。现在。。。这似乎一切都很好，但是...如果两个脚本同时更新，则处理状态栏的 PHP 不会更新 - 它仍在检索旧信息。

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

我尝试在"几乎可以工作的脚本"之前插入它：

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

但是，它不起作用。好吧 - 确实如此，但只有一次。用户每天至少需要和他们的宠物一起玩 3 次才能获得 100% 的幸福感，所以只延迟一次第二次 DIV 对我来说并不合适。当我尝试多次添加相同的脚本时，它只是停止了一起工作。我能做什么？！

如果您想查看工作原理的屏幕截图，请直接询问。我很乐意应要求提供它们。

提前谢谢你！

您可以使用

第一个 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/

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

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

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

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

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

而不是setTimeout，使用 setInterval。当不再需要它时，您可以使用 clearInterval 将其终止。

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