jQuery UI .buttonset()太慢了

Question

我在一个HTML页面上有几千个按钮。运行 $(".buttonset").buttonset(); 需要超过10秒钟的时间。有没有更快的方法来实现，或者我的唯一解决方案是限制按钮数量？

- Claudiu

---

我想你已经知道这个问题的答案了。 - j08691

只是出于好奇，您介意告诉我们为什么您需要在一个页面上放置那么多按钮吗？ - thatidiotguy

@dystroy: 他在谈论buttonset() jQuery UI方法，我相信。楼主，我认为这是开始考虑制作自定义解决方案的情况。要么就像其他人建议的那样减少按钮数量。 - Zach Shipley

我有时候使用的一个技巧是将操作分割成稍后一秒钟（例如）执行的操作，这些操作不需要立即执行（比如将气泡钩在由于滚动位置而不可见的物品上）。 - Denys Séguret

单个网页中有成千上万个按钮？我会使用分页。现在你有某种过滤，当要显示一组时，我会按需创建按钮集合。 - Fabrício Matté

Answer 1

在首次显示之前，根据需要创建buttonset。我刚刚测试了2400个盒子分成12个部分。在我的i7上使用Chrome 23、Firefox 17、IE9和Opera 12运行得很顺畅。这可能会在您第一次打开复选框组时增加分裂加载的时间，但它可以通过不创建未使用的样式按钮来节省一些RAM，直到它们被需要为止。 Fiddle

- Fabrício Matté

---

我认为这是解决方案。您还可以构建按钮集的HTML以匹配jquery-ui最终生成的内容，然后在单击时运行“buttonset”，并重新触发单击事件。 - numbers1311407

当然，我并不是指所有的东西，只是jquery-ui插入的创建的<span>包装器和其他内容，以便在实际成为小部件之前可以通过jquery-ui的样式表进行样式设置。 - numbers1311407

哦，是的，标签内的跨度，我会看一下的。=] - Fabrício Matté

这里有一个与 UI 生成的相似 HTML 结构类似的小型样例：样例链接。除了初始创建时的开销外，我并没有注意到太大的性能差异，我想 UI 处理得更好。:P 但从优化角度来看，制作自定义插件可能是最佳选择。 - Fabrício Matté

Answer 2

对于 buttonset() 设置成千上万个按钮所需的速度，您并没有太多可以做的事情，但如果您遇到了浏览器消息提示页面已经变得无响应的问题，您可以使用 setTimeout 调用将操作分解为异步操作。

$(".buttonset").buttonset();

Would become:

$(".buttonset").each(function(index, button) {
   setTimeout(function() {
       $(button).buttonset();
   }, 0);
});

我已经成功地将这种模式应用于数千个jQuery UI对象，虽然它不能加速操作，但可以防止页面锁死，从而使页面看起来更快。

- dmck

---

对于我来说，在IE9上仍然显示浏览器无响应的消息，并且会在Firefox上冻结，而且使用超时处理所需的时间比没有超时处理所需的时间更长，但如果它可以工作... - Fabrício Matté