從加載延遲AJAX？

我正在編寫一個基於PHP的在線奇幻寵物模擬遊戲。我對AJAX不是很熟悉，所以請在回答時記住這一點。從加載延遲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鏈接之一，它更新兩個div（一個DIV包含當用戶餵養/水域/玩他們的寵物時顯示的消息，另一個DIV包含狀態欄）。現在... 似乎一切都很好，但是...但如果兩個腳本完全同時更新，那麼處理狀態欄的PHP不會更新 - 它仍在檢索舊信息。

我向大家提出的問題是：有什麼辦法可以延遲運行第二組腳本（以便在PHP更改MySQL後更新）？

我嘗試過「幾乎工作腳本」插入這樣的：

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

但是，這是行不通的。那麼 - 它確實，但只是一次。用戶需要每天至少玩三次寵物才能達到100％的快樂，所以延遲第二次DIV只能一次不會對我造成傷害。當我多次嘗試添加相同的腳本時，它只是停止了所有工作。我能做什麼？！

如果您想查看工作情況的截圖，請直接詢問。我會很樂意根據要求提供。

預先感謝您！

來源

2012-06-27 Connie

而不是setTimeout，請使用setInterval。當不再需要時，你可以使用clearInterval來殺死它。

setInterval將每n毫秒執行一個給定的函數。

來源

2012-06-27 21:40:14

THANK YOU SO MUCH！它像一個魅力一樣工作！ = d – Connie

，而不是硬編碼的延遲時間，你也許可以使用第一個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-27 21:42:28

您可以使用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-27 21:43:21 drew010

我不確定，但我認爲ajax構造函數更適合您的目的http://api.jquery.com/jQuery.ajax/。

在那裏，你可以設置的AJAX將是同步的（它會等待完成AJAX回調）

下面是一些關於它的理論:)

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

來源

2012-06-27 21:43:27

從加載延遲AJAX？

回答

相關問題