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

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

阅读43,439 reasons to use append() correctly，以帮助您了解如何做到您需要做的事情，而不用附加信息

Answer 2

您可以将脚本附加为最后一个操作。丑陋，但从问题的描述来说，解雇一个事件是行不通的。

Answer 3

将'bigHairyDOMManipulation'和'hide'调用包装在show动画的回调上。

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

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

3 个答案: