Как мне отложить анимацию jQuery, пока другие не закончат работу?

Question

У меня есть функция, которая выполняет довольно обширные манипуляции с DOM, и я хочу показать спиннер «Загрузка ...» во время выполнения функции:

function showFoos() {
  $('#spinner').show();
  bigHairyDOMManipulation();
  $('#spinner').hide();
}

function bigHairyDOMManipulation() {
  for (var i=0; i < arrayOfFoos.length; i++){
    buildFooBox(arrayOfFoos[i], i);
  }
}

function buildFooBox(foo, index) {
  $('#foos').append(
              $('<li />').append(...)
                         .append(...)
                         ...
             );
}

К сожалению, все вызовы append() возвращаются быстро, поэтому, даже если представление не готово, функция выполнена, и счетчик скрывается.

Я не могу придумать хороший способ объединения всех этих добавок в одну цепочку, поэтому я не могу просто прикрепить show() спереди и hide() в конце.

Есть ли другой способ заставить hide() вызвать ожидание всех других манипуляций?

Answer 1

Имея тонны дополнений и манипуляций с домом, это очень плохая идея. Это заставит браузер перерисовывать несколько раз подряд, что замедляет работу. Похоже, вы создаете целую кучу новых элементов.

Прочитайте 43,439 причин, чтобы правильно использовать append () , чтобы помочь вам понять, как делать то, что вам нужно, без сумасшедших с добавками

Answer 2

Вы можете добавить скрипт как последнее действие. Ужасно, но из описания проблемы запуск события не будет работать.

Answer 3

Оберните вызовы 'bigHairyDOMManipulation' и 'hide' в обратный вызов для анимации шоу.

 function showFoos() {
    $('#spinner').show(function(){
       bigHairyDOMManipulation();
       $('#spinner').hide();
    });
  }