関数の実行中にjavascriptローダーイメージを表示

Question

ボタンをクリックし、ローダーイメージを表示し、時間のかかる関数を実行し、ローダーイメージを非表示にしたいとします。これを試みると、イベント全体が実行されるまでページがフリーズするので、ローダーイメージは見えません。ここで

はサンプルです：

$('#btn').click(function() { 
    $('#LoadingImage').show(); 
    <time consuming function> 
    $('#LoadingImage').hide(); 
}); 

は、どのように私ははっきりと、ローダーイメージを表示画面を更新し、機能を実行し、ローダーイメージを非表示にできますか？

Answer 1

あなたはべき仕事を持っているもの、これをやってみたが：

$('#btn').click(function() { 
    $('#LoadingImage').show(); 
    setTimeout(function() { 
     <time consuming function> 
     $('#LoadingImage').hide(); 
    }, 0); 
}); 

これは、イベントのコールスタックをエスケープします。

THATが機能しない場合は、この謎の時間のかかる機能の詳細を投稿してください。

Answer 2

さまざまな理由から、JSはメインスレッド上で実行する必要があります。すなわち、JSが実行されている限りペイントがブロックされます。つまり、クロムなどのマルチプロセスアーキテクチャでもタブがJSを実行している場合、

あなたの唯一の方法は、あなたの関数の実行を分割するか、または関数をhtml5ワーカースレッドに移動することです。そしてそれらはFirefoxとSafariのベータ版でしか動作しません