Question

I am programming an online PHP-based fantasy pet simulation game. I am not very familiar with AJAX, so please keep this in mind when answering.

On pet pages, I would like users to be able to feed/water/play with their pets without needing to reload the entire page – that’s why I’m using AJAX. Here’s what I have so far:

Working Script

$(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>

Working 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>

NOW, everything that I listed above works like a charm! This is my problem: I want those links to also update another DIV – the one which contains updated status bars showing how hungry/thirsty/unhappy their pet is. Currently, I am doing that like this:

The Almost Working Script

$(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=#');
});

});

The script above makes it so that when a user clicks one of the HTML links, it updates two DIVS (one DIV containing the message displayed when a user feeds/waters/plays with their pet, and the other containing the status bar). Now… that seems all fine well and good, BUT… if both scripts update at exactly same time, then the PHP that handles the status bar is not updated – it’s still retrieving old information.

My question to all of you is: Is there any way that I can delay running the second set of script (so that it will update after the PHP makes changes to MySQL)?

I tried inserting this before “the almost working script”:

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

However, it doesn’t work. Well – it does, but just once. Users need to play with their pets at least 3 times a day to achieve 100% happiness, and so delaying the second DIV only once doesn’t cut it for me. When I tried adding the same script multiple times, it just stopped working all together. What can I do?!

If you’d like to see screen shots of how things are working, please just ask. I will be happy to provide them upon request.

Thank you in advance!

Answer 1

Instead of setTimeout, use setInterval. When it’s no longer needed, you can kill it using clearInterval.

setInterval will execute a given function every n milliseconds.