高级 jQuery：让好的应用程序变成强大的应用程序

核心提示： 该代码看起来比较简单，因为我在好几篇文章中都用到这个小部件，高级 jQuery：让好的应用程序变成强大的应用程序(3)，您在第一篇文章中见到了 “select/deselect all” 小部件，我给出了它的基础形式，在调用 click 方法之后，需要使用 bind 方法

该代码看起来比较简单，因为我在好几篇文章中都用到这个小部件。您在第一篇文章中见到了 “select/deselect all” 小部件，我给出了它的基础形式。在关于性能的文章中，您看到如何通过缓存选择查询和通过 CLASS 减少使用查询来改进它的性能。但是还有一个问题需要解决。当在包含 100 行的表中勾选 “select/deselect all” 复选框之后，您将得到糟糕的性能。事实上，在我的浏览器中，如果使用了这些代码，那么完成选择的平均时间为 3.4 秒。响应性太差了！即使进行了各项优化，仍然有些不可接受的地方。

让我们深入一步考察这个算法，看看是否有地方出了问题。您将遍历页面上的每个复选框，看看它们当前的 “checked” 状态是否与 “select/deselect all” 复选框一致。如果不一致，就对其调用 “click”，以和 “select/deselect all” 复选框的状态匹配。等一等，您还需要向这些复选框添加一个函数，从而在每次单击时都调用 changeNumFilters() 函数。通过仔细检查，您发现设置了一个可能调用 changeNumFilters() 101 次的算法。怪不得性能如此差。很明显，您不需要在每次单击时都更新选中的消息的计数，而是在该过程完成之后进行更新即可。在单击复选框的同时如何才能避免调用该方法？

现在，unbind() 方法开始发挥它的作用。通过在单击复选框之前调用 unbind()，将停止调用 click()，同时避免了 click() 进一步调用 changeNumFilter() 方法。这很棒！现在就不会调用 changeNumFilters() 101 次了。但是，这仅是一次有效的，在调用 click 方法之后，需要使用 bind 方法将 click 方法添加回到每个复选框。清单 2 显示了更新之后的小部件。