Как показать значок прогресса во время дорогостоящей операции 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 может отображаться, но не анимироваться в аналогичных обстоятельствах.

Скорее всего, можно сделать так, чтобы гиф показывался так:

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

});