延迟加载 AJAX？答案

【问题标题】：Delay AJAX from loading?延迟加载 AJAX？
【发布时间】：2012-06-27 21:36:58
【问题描述】：

我正在编写一个基于 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 延迟一次对我来说并没有什么好处。当我尝试多次添加相同的脚本时，它就停止了一起工作。我该怎么办？！

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

提前谢谢你！

【问题讨论】：

标签： php jquery ajax

【解决方案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/

【讨论】：

【解决方案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 的所有内容，而不是必须对数据进行二次调用。

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：