Задержка AJAX от загрузки?

Question

Я программирую онлайн-игру для моделирования фэнтези-игр на основе 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-ссылок, он обновляет две дивы (один DIV, содержащий сообщение, отображаемое, когда пользователь подает/воды/играет со своим питомцем, а другой содержит строку состояния). Теперь ... кажется все хорошо и хорошо, НО ... если оба скрипта обновляются точно в одно и то же время, тогда PHP, который обрабатывает строку состояния, не обновляется - он все равно извлекает старую информацию.

Мой вопрос для всех вас: есть ли способ отложить запуск второго набора сценариев (чтобы он обновлялся после того, как PHP вносит изменения в MySQL)?

Я попытался вставить это до «почти рабочего сценария»:

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

Однако, это не работает. Ну, это так, но только один раз. Пользователи должны играть со своими питомцами по крайней мере 3 раза в день, чтобы достичь 100% счастья, и поэтому отсрочка второго DIV только однажды не сократит его для меня. Когда я пытался несколько раз добавлять один и тот же скрипт, он просто переставал работать вместе. Что я могу сделать?!

Если вы хотите посмотреть снимки экрана, как все работает, просто спросите. Я буду рад предоставить их по запросу.

Спасибо заранее!

Answer 1

Вместо setTimeout, используйте setInterval. Когда он больше не нужен, вы можете убить его, используя clearInterval.

setInterval будет выполнять заданную функцию каждые n миллисекунд.

Answer 2

Вместо закодированного времени задержки, может быть, вы можете использовать функцию обратного вызова первого действия АЯКС:

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

Answer 3

Вы можете использовать параметр 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 одним вызовом, вместо того, чтобы делать вторичный вызов для данных.

Answer 4

Я не уверен, но я думаю, что конструктор ajax лучше для вашей цели. http://api.jquery.com/jQuery.ajax/.

Там вы можете установить, что AJAX будет синхронным (Он будет ждать, чтобы закончить обратный вызов AJAX)

Вот несколько теория об этом :)

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