長時間実行されているイベントの中でページ要素を更新するにはどうすればよいですか？

Question

私は長い実行方法を持っています - そして、私は操作が進行中であることをユーザに示したいと思います。これはNOTとAJAX呼び出しですので、過去に使用した一般的なパターンを使用して、AJAXイベントの前にスピナーを表示してから、それを成功に隠すことはできません。

私の場合、私はajaxコールを作っていません、代わりに非常に重いDOM操作をしています。

私はjsFiddle.netのテスト例を持っていました。イベントをキャプチャする方法を学ぶのが大好きです。現時点では、私の「待ちのメッセージ」

完全なサンプルコードはここにある非常に遅すぎる:(ある私の操作が完了すると同じ正確な時間でdivのアップデート：http://jsfiddle.net/rsturim/97hrs/6/

のJavascript（jQueryの）

$(document).ready(function() { 

    $("#link-action").click(function(e) { 

     $("#wait-message").text("starting ..."); 

     var count = longRunningMethod(1000000000); 

     $("#result").text(count); 
     $("#wait-message").text("completed."); 

    }); 


    var longRunningMethod = function(countUpTo) { 
     var i = 0; 
     while (i <= countUpTo) { 

      i++; 
     } 

     return i; 

    }; 
}); 

HTML：ここ

<div id="wait-message"> 
    push button please 
</div> 
<hr /> 

<button id="link-action">Run Operation</button> 

<hr /> 

<h1>Results:</h1> 
<div id="result"> </div> 

Answer 1

が解決策である私はそれがすべてのブラウザで動作するかどうか、あなたはいくつかでそれをテストすることをお勧めしますわからないんだけど、私はそれを考えます。

$(document).ready(function() { 

    $("#link-action").click(function(e) { 

     $("#wait-message").text("starting ..."); 

     // Stuff to do after a render 
     setTimeout(function(){ 
      var count = longRunningMethod(1000000000); 

      $("#result").text(count); 
      $("#wait-message").text("completed."); 
     }, 0); 
    }); 


    var longRunningMethod = function(countUpTo) { 
     var i = 0; 
     while (i <= countUpTo) { 

      i++; 
     } 

     return i; 

    }; 
}); 

基本的に、スクリプトの実行が完了するまでブラウザは変更を行いません。特定のクラス

を持つすべてのdivが行で

これらのdivのいずれかを表示すると、ブラウザが表示されているdiv要素をレンダリングすることはありません

• 隠す：のようにそれはあなたが物事を行うことができますあなたが奇妙なちらつきや物事をページ上を動かすことはありません。

  匿名のクリックハンドラが実行を終了し、ブラウザが再レンダリングされ、setTimeoutの無名関数が実行されます（実際の遅延がないためレンダリングの直後）。

Answer 2

whileループの代わりにsetTimeoutまたはsetIntervalを使用します。 15ミリ秒のような秒の遅れはあなたのウィンドウがフリーズするのを防ぐのに十分であるべきです/ UIロック。