高価なjquery操作中に進行状況アイコンを表示するにはどうすればよいですか？

Question

進捗状況のajaxアイコンを表示してから、一連のjavascriptを実行して、進行状況アイコンを非表示にするには、次のコードがあります。

これを実行すると、div#collapseExpandProgressがまったく表示されなくなります。

私の推測では、次のいずれかです。それはすべての

で示していない

1. each()メソッドがコールバックメソッド

$("#expandAll").click(function (e) { 
     $('#collapseExpandProgress').show(); 

     $(".treeclick", "#treegrid").each(function() { 
     if ($(this).hasClass("tree-plus")) { 
      $(this).trigger("click"); 
     } 
    }); 

    $('#collapseExpandProgress').hide(); 

}); 

どれでも提案をオフに動作しますので、それを示すとすぐに隠れています何がここで間違っているのでしょうか？

Answer 1

完全な技術的説明はありませんが、これまでに経験したことがあります。おそらく、javascriptの制御フローの仕組みと関係があります。恐らくJavascriptはシングルスレッドなので、操作の同期部分が完了するまでDOMは更新されません。

私は、アニメーションgifが同様の状況では表示されてもアニメーション化されないことも発見しました。

あなたは、ほとんどの場合、GIFはこのように表示するために取得することができます。

$('#collapseExpandProgress').show(); 

    window.setTimeout(function() { 
     $(".treeclick", "#treegrid").each(function() { 
     if ($(this).hasClass("tree-plus")) { 
      $(this).trigger("click"); 
     } 
     $('#collapseExpandProgress').hide(); 
    },50); // just some low number 

はしかし、私は多分、ブラウザによっては、それが最初の場所には表示されませんでした同じ理由でアニメーション化しません疑います。

Answer 2

最後のコールバックでhide()をトリガーするマイナーシャッフルをeach()に送信すると、そのトリックを行う必要があります。

elsCheck = $(".treeclick", "#treegrid"); 

$("#expandAll").click(function(e){ 

    $('#collapseExpandProgress').show(); 

    elsCheck.each(function(i){ 
     if ($(this).hasClass("tree-plus")) { 
      $(this).trigger("click"); 
     } 
     if (i==(elsCheck.length-1)){ $('#collapseExpandProgress').hide(); } 
    }); 

});