如何在所有处理完成之前隐藏对页面所做的jQuery更改？

Question

我有一个页面，上面有一个很大的表格。在表的顶部，我添加了几个用于消除表中行的过滤器。当有人更改筛选器时，jQuery会处理这些更改，并在表中显示/隐藏与筛选器匹配的行。

处理代码首先显示表中的所有行。然后，它遍历每个筛选器，并在必要时隐藏表中的行。因此，用户每次更改筛选器时，都会立即看到整个表，然后看着这些行消失，直到筛选完成。

是否有JavaScript或jQuery函数可以延迟输出到浏览器，直到所有处理完成？

Answer 1

您可以对表执行clone操作，在克隆上执行所需的任何操作，并在完成后对原始表执行replace操作：

var newTable = $("#yourTable").clone();
//Do whatever you need to do to newTable
$("#yourTable").replaceWith(newTable);

这是一个working example。

Answer 2

下面是一个简单的例子：http://jsfiddle.net/YNZJf/

主要使用jquery更改html，然后在完成后将其设置回您的表中。

$tmp = $( $('#table').html()));
$tmp.filter(); // do work;
$('#table').html($tmp.html());

Answer 3

我知道您已经接受了一个答案，但是克隆表不是我选择的实现方式。我更喜欢修改修改表的代码，而不是直接修改它。相反，应创建一个输出数组，其中包含将对实际可见表进行的修改列表。然后，运行您的代码并让它创建此输出数组(显示和隐藏哪些行或进行任何其他修改)。然后，当代码的较长部分都完成后，您就有了这个输出数组，您只需遍历最终的输出数组并应用更改。如果最后这部分都在JS的一个同步部分中完成，查看者将看不到中间步骤，只看到最终结果。

您应该注意到，在将其插入到文档中之前，克隆和操作它有一些特征，请注意：

1. 克隆和操作具有分配给其中元素的is的对象时可能会出现问题(因为您只能有一个具有给定id).
2. Non-jQuery事件处理程序的对象，因此可能无法将其复制到新对象上。
4. 如果您的表很大，则克隆可能会很慢(要创建大量重复的对象和属性)。
5. 如果您修改表的任何操作假定该表在文档中，则在插入之前，这些操作可能无法在克隆表上起作用。