関連している可能性がある (または関連していない可能性がある) 2 つの画面更新の問題があります。私が明確に再現できるのは、一連の ajax 呼び出しを行うことです。各呼び出しの間に、進行状況を示すために jQuery ダイアログ ボックス内のテキストを更新しています。プロセスの最後に、ダイアログ ボックスを非表示にします。
デバッグ パネルを使用して Chrome でこのコードを実行し、各 ajax 呼び出しの前後にブレークポイントを配置すると、ダイアログ ボックスが適切に更新されます。コードを中断せずにそのまま実行すると、画面がまったく更新されません。
各 ajax 呼び出しの間に待機ループを導入しようとしましたが、問題は解決しません。コードの編集されたバージョンを次に示します。
$('#saving').show();
$('#savingSpan').text('Saving Analysis');
$('#savingReport').text('Saving Header: ');
$('#savingInputs').text('Saving Inputs: ');
$('#savingResults').text('Saving Results: ');
$('#savingComplete').text('Doing Cleanup: ');
wait(250);
$('#savingReport').append('Started...');
var status = saveReport();
$('#savingReport').append('Complete.');
wait(250);
$('#savingInputs').append('Started....');
status = saveInputs();
$('#savingInputs').append('Complete.');
wait(250);
$('#savingResults').append('Started....');
status = saveResults();
$('#savingResults').append('Complete.');
wait(250);
$('#savingComplete').append('Started....');
status = saveComplete();
$('#savingComplete').append('Complete.');
$('#saving').hide();
もう 1 つの問題は、ページが最初に読み込まれるとき、ページのその部分にマウスを移動するまで、その大部分が空白になることです。次に、マウスを動かした領域が正しく表示されます。