2

私はオンラインの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も更新する必要があります。この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リンクの1つをクリックすると、2つのDIVSを更新するようにします（1つのDIVには、ユーザーがペットと餌をやったり、水をやったり、遊んだりするときに表示されるメッセージが含まれ、もう1つにはステータスバーが含まれます）。さて...それはすべてうまくいっているようですが...両方のスクリプトがまったく同時に更新された場合、ステータスバーを処理するPHPは更新されません-それでも古い情報を取得しています。

皆さんへの私の質問は次のとおりです。スクリプトの2番目のセットの実行を遅らせることができる方法はありますか（PHPがMySQLに変更を加えた後に更新されるように）？

「ほぼ機能するスクリプト」の前にこれを挿入してみました。

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

ただし、機能しません。ええと、そうですが、一度だけです。ユーザーは、100％の幸せを達成するために、少なくとも1日に3回ペットと遊ぶ必要があります。そのため、2番目のDIVを1回だけ遅らせても、私にとっては効果がありません。同じスクリプトを複数回追加しようとすると、すべてが一緒に機能しなくなりました。私に何ができる？！

動作のスクリーンショットをご覧になりたい場合は、お問い合わせください。ご要望に応じて喜んで提供させていただきます。

前もって感謝します！

4

4 に答える 4

2

ハードコードされた遅延時間の代わりに、最初の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-27T21:42:28.517 に答える
1

この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データを返すようにすることもできます。これにより、人がペットに対して/ペットと何かをしたときに、すべての統計が返されるため、1回の呼び出しでdivのすべてをすぐに更新できます。データの2次呼び出し。

于 2012-06-27T21:43:21.943 に答える
1

よくわかりませんが、目的にはajaxコンストラクターの方が適していると思います http://api.jquery.com/jQuery.ajax/。

そこで、AJAXが同期するように設定できます（AJAXコールバックの終了を待機します）

ここにそれについてのいくつかの理論があります:)

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

于 2012-06-27T21:43:27.623 に答える
0

の代わりに、 setIntervalsetTimeoutを使用します。不要になったら、clearIntervalを使用して強制終了できます。

setIntervalnミリ秒ごとに特定の関数を実行します。

于 2012-06-27T21:40:14.523 に答える