如何在昂贵的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(); }
    });
});