复选框检查缓慢答案

【问题标题】：checkbox slow to check复选框检查缓慢
【发布时间】：2013-02-16 22:33:46
【问题描述】：

我正在使用复选框来显示或隐藏 jqGrid 中的列，并且由于我有很多很多行，每行在其单元格中都有很多值，所以当我检查它时，复选框需要很长时间才能完成检查。

我希望复选框立即选中，然后执行耗时的 jqGrid 操作。例如，

$('input[type="checkbox"]').click(function(e) {
    // First render/unrender the checkmark    
    // Next do some very time-consuming jqGrid operations
}

我怎样才能做到这一点？就目前情况而言，它首先执行 jqGrid 调用，最后只检查 checkox。选中复选框需要整整两秒钟！

【问题讨论】：

您能否更准确地解释您指的是哪些复选框？是columnChooser 的复选框，还是您使用其他一些自定义界面，您只需调用showCol 或hideCol？
嗨奥列格。我使用了一个自定义接口，我在其中调用了 showCol 和 hideCol。即使我在单个 colName 上使用 showCol，也会出现问题。我使用的是 jqGrid 4.4.1，所以它有你的单元格 [i] css 优化。

标签： javascript jquery jqgrid

【解决方案1】：

尝试将耗时的代码放入超时：

// immediate stuff here
setTimeout(function() {
   // time-consuming stuff here
},1);

理想情况下，您希望将这些耗时的东西放在 Web Worker 中，以免冻结 UI。

【讨论】：

【解决方案2】：

您可以在页面和脚本中进行优化。

将您的脚本放在<body> 标记的末尾之前。
使用工具提高性能：我可以推荐的最好的工具是dynaTrace AJAX Edition，它是一个IE分析器（通常是JS性能最慢的，所以实际上是一个很好的开始优化的测试环境）。它会给你一个完整的细分，向你展示重复的方法调用、调用树以及你的 CPU 周期的去向。 Check out their tutorials on usage/features 开始使用。
Improving jQuery Performance with Large Data Sets 主题包括：

使用 JavaScript 原生 for() 循环代替 jQuery 的 $.each() 帮助器
功能。

不要在循环中将元素附加到 DOM。

如果你有很多元素要插入到 DOM 中，请将它们包围
与父元素更好性能。

不要使用字符串连接，而是使用数组的 join() 方法很长的字符串。

使用 setTimeout() 函数进行长列表循环和连接
功能。

缩小你的脚本

希望这些足以获得更好的性能

【讨论】：

【解决方案3】：

我相信您可以在一个 .click() 函数中渲染/取消渲染复选标记，然后在另一个 .click() 中执行您的 jqGrid 操作。即

$('#selector').click(
    function(){//rendering stuff}
).click(
    function(){//computational stuff}
);

【讨论】：

但是怎么做呢？我花了一整天的时间试图弄清楚这一点。
我相信这是正确的，尽管第二个 .click 可能需要是 .done