クリックするとショッピングカートを更新するAJAXリクエストを送信するボタンを作成していました。
問題は、ユーザーがすばやく連続して複数回クリックすると、スクリプトが更新できないことです (たとえば、2 秒間に 10 回クリックしても、項目が 2 回追加されただけです)。
とにかくajaxリクエストをキューに入れるのだろうか?
クリックするとショッピングカートを更新するAJAXリクエストを送信するボタンを作成していました。
問題は、ユーザーがすばやく連続して複数回クリックすると、スクリプトが更新できないことです (たとえば、2 秒間に 10 回クリックしても、項目が 2 回追加されただけです)。
とにかくajaxリクエストをキューに入れるのだろうか?
はい、ajax リクエストをキューに入れることができますが、リクエストが完了するまでボタンを無効にすることをお勧めします。
ブラウザーは自動的に ajax 要求をキューに入れますが、順序は保証されず、すべてが最終的に実行されるだけです。
それらを順番に実行する必要がある場合は、Google経由でhttp://code.google.com/p/jquery-ajaxq/を見つけました。これは、ajaxリクエストにキューを追加し、順番に実行されるようにするプラグインです。一度に1つ以上。
無効になっているボタンの場合は、ajax リクエストにタイムアウトを追加してください。リクエストがタイムアウトした場合は、ボタンを再度有効にしてください。
次の方法で単純なキューを実装できます。
var lock = false, queue = [];
$('#submitButton').click(function (event) {
var data = ExtractRequestData(); // This function is what you do to get the data you want to send
PerformRequest(data);
});
function PerformRequest(data) {
if (!lock) {
lock = true;
$.ajax(// perform ajax request
complete: function (data) {
// Complete handler
lock = false;
if (queue.length > 0) {
PerformRequest(queue.shift());
}
}
} else {
qeueu.push(data);
}
}
これにより、リクエストが順番どおりに実行され、各リクエストが完了した後に次々と実行されることが保証されます。