私は、読み込みの一部として多くの計算を行うWebページを持っています。スクリプト実行中のJavaScriptページの更新
私はスピンバーを表示して、エンドユーザーが遅延が予想されることがわかるように、ページが「考えている」間に表示したいと考えています。
私がこれを行う方法は、回転ホイールとなるGIFファイルを表示し、出力になるテーブルを非表示にすることです。
問題が発生すると、機能が開始されると、機能が完了するまでページの更新がフリーズするように見えます。したがって、エンドユーザは「処理中」セクションを見ることはありません。
私は私の問題を示すために一緒に入れたサンプルコードは次のとおりです。
<!DOCTYPE html>
<html>
<body>
<script>
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
function Processing(x)
{
if (x === true)
{
show('page', false);
show('loading', true);
}
else
{
show('page', true);
show('loading', false);
}
}
function MainProcess()
{
Processing(true) // Set to "Show processing..."
var start = new Date().getTime(); // Sleep a few seconds
for (var i = 0; i < 5; i++) {
if ((new Date().getTime() - start) < 3000) { i = 1 }
}
Processing(false) // Set to "Show Completed processing..."
}
window.onload = function() {
show('page', false);
show('loading', false);
};
</script>
<div id="loading">
<h1>Processing your request.</h1>
</div>
<div id="page">
<DIV class="body">
<h3>Done Processing your request.</h3>
</DIV>
</div>
<div id="buttons">
<button onclick="MainProcess();">Start Timer</button>
<button onclick="Processing(false);">Set to Completed</button>
<button onclick="Processing(true);">Set to Processing</button>
</body>
</html>
私はこれを実行すると、それは3つのボタンが提示しています。
"Start Timer"を押すと、数秒間処理が表示され、doneが表示されます。代わりに、ボタンは色を変え、タイマーが完了するまで何もしないように見え、完了を表示します。
(私はJavaScriptに新しいですが、いくつかの他の言語での経験豊かなプロ。コールの「DoEvents関数」タイプがあり、私は、Visual BasicまたはPowerShellのようにすることができますか?)
だから私は、アプリケーションが動作していることをユーザーに示すために、アプリケーションの全体的なパフォーマンスに遅れを加えなければなりません.. LOL - ありがとう、それは動作します。 –