jquery - 如何延迟 jQuery 动画直到其他动画完成之后？

我有一个函数可以执行一些相当广泛的 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() 调用都会快速返回，因此即使 View 尚未准备好，函数也已完成并且微调器会隐藏。

我想不出一种将所有这些附加链接到一个链中的好方法，所以我不能只将 show() 放在前面，而 hide () 位于末尾。

是否有另一种方法可以强制 hide() 调用等待所有其他操作发生？

最佳答案

拥有大量的追加和 dom 操作是一个非常糟糕的主意。它会导致浏览器连续多次重绘，这会减慢速度。看起来您正在创建一大堆新元素。

阅读43,439 reasons to use append() correctly帮助您了解如何做您需要做的事情，而不会对附加内容感到疯狂

关于jquery - 如何延迟 jQuery 动画直到其他动画完成之后？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1836012/