jQuery AJAX jQuery リクエストに奇妙な問題があります。サイトでレポートを生成するときは、しばらく時間がかかることがあるため、ポーリングで更新するステータス バーがあります。しかし、私が見ているのは、これらの要求がタイムアウトして再送信されているように見えるということです。これは非常に奇妙な動作です。
ワークフローは次のとおりです。 - ユーザーが電子メール アドレスを入力し、[レポートを取得] をクリックします。 - ボタンが AJAX 要求をトリガーします (以下を参照)。-AJAX リクエストを作成した後、checkStatus 関数をポーリングするための 2 番目の単純なリクエストを送信します。この関数は、画面上のステータス バーを更新するコールバックに JSON 文字列を返します。-元の AJAX リクエストの「成功」プロパティで、ポーリングを停止するフラグを設定したため、レポートが完了すると、ポーリングが停止します (そして、最後のステータスの更新は完了したことを反映します)。
1 つの小さな問題を除いて、これは完全に機能します。大きなレポートがあると、ユーザーが実際に何もせずに 2 番目の getReport リクエストを送信しているように見えます。これは、ステータスが 1000 行中約 700 行になり、1000 行中 15 行、1000 行中 710 行、1000 行中 25 行にジャンプするため、2 つのレポートが同時に生成され、ステータス フラグが更新されていることを示しています。さまざまな状態で。
私が把握できるのは、元の getReport AJAX リクエストが何らかの理由で再送信されていることだけです。タイムアウトまたは私が認識していないものはありますか?
コードは次のとおりです。
var update = false;
//// Function triggered by user when requesting report
function get_report () {
if ( !$("#reportEmail").val() ) {
alert ( "Please enter a valid email address to send the report to." );
return;
}
var dataStr = "email="+$("#reportEmail").val();
$("#report").html ( "<b>Your report is being generated and will be emailed to you momentarily.</b>" );
$.ajax({
type: 'POST',
data: dataStr,
url: "/reports/roster/15",
success: function() { update = false; }
});
$("#completed").css ( 'width',"0" );
update = true;
setTimeout ( "checkStatus('reg_roster', updateStatusBar);", 10 );
}
//// Call back from the checkStatus function
function updateStatusBar ( data ) {
response = jQuery.parseJSON(data);
if ( response ) {
$("#statusBar").show();
$("#completed").css ( 'width', response.completed+"%" );
$("#msg").html ( response.message );
if ( update == true )
setTimeout ( "checkStatus('reg_roster', updateStatusBar);", 1000 );
}
}
////Polling function to check status
function checkStatus(type, callback) {
$.ajax({
type: 'POST',
async: false,
data: "&type="+type,
url: "/status/check/",
success: callback
});
}