2017-04-26 9 views
1

私は、読み込みの一部として多くの計算を行う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のようにすることができますか?)

答えて

1

処理機能が開始される前に、DOMの更新(つまり、DIVの表示プロパティを変更する)が完了しないことが問題です。

function MainProcess() 
 
{ 
 
    Processing(true); // Set to "Show processing..." 
 

 
    // Pause for 100 ms before starting time-consuming code to allow dom update to c 
 
    var domUpdateDelay = 100; 
 
    window.setTimeout(function() { 
 

 
         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..." 
 
         }, 100); 
 
}

window.setTimeoutはは2つの引数を取ります:最初の引数が1つのオプションは、DOMの更新が完了できるように、あなたの処理機能の開始を遅らせるためにwindow.setTimeoutはを使用することですxミリ秒後に実行される関数。ここで、xは2番目の引数です。

このアプローチの問題は、setTimeoutの遅延がマシン/ユーザー/ブラウザ/実行によって異なることです。しかし、私の推測では、これは99%のケースではおそらく問題ではないということです。

+0

だから私は、アプリケーションが動作していることをユーザーに示すために、アプリケーションの全体的なパフォーマンスに遅れを加えなければなりません.. LOL - ありがとう、それは動作します。 –

0

私はあなたがを活用することができると思いますsetTimeoutメソッドのような関数(https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)は、言う:

setTimeout(function() { 
    Processing(false); 
}, 5000); 

私はあなたがほぼそのループでブラウザをクラッシュしているで何が起こっているかと思います。あなたの質問のどの部分がデモンストレーション目的のためだけにあるのか誤解しているかもしれません。

+0

ループは単なるコードスニッフィングの方法でした。 このソリューションの問題点は、値の更新が遅れますが、値が更新されると、ブラウザに画面を更新するためのフリー・サイクルが与えられないことです。メインプロセスを遅らせることで、「作業中」のコード部分が実行され、遅延によって画面が更新されます(GUIプログラミング日から貧しい人のDoEvents)。 –

関連する問題