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

});