Question

我有以下代码来显示进度ajax图标，然后运行一堆javascript然后隐藏进度图标。

运行时，我看不到div#collapseExpandProgress可见。

我猜是：

根本没有显示
它会立即显示并隐藏，因为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(); }
    });

});

如何在昂贵的jquery操作期间显示进度图标？

2 个答案: