如何在昂貴的jquery操作中顯示進度圖標？

Question

我有以下代碼來顯示進度ajax圖標，然後運行一堆javascript，然後隱藏進度圖標。

運行此操作時，我看不到div#collapseExpandProgress變得可見。

我的猜測可以是：

1. 它不是在所有
2. 顯示它的顯示，並立即隱藏，因爲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

在你最後回調each()時觸發hide()的小洗牌應該有效。

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(); } 
    }); 

});