功能很慢，有没有更快的方法？ （使用jQuery 1.4.2）

Question

以下函数需要至少3秒才能运行（在500个表行上）。是否有可能使此功能更快？

function prepareTable() { 
    var groupIndex = 0; 
    $("#row tbody tr").each(function(index) { 
    // each row gets a unique id 
    // remove default css styles for table rows 
    // read out hidden value, that stores if row is a group 
    var group = $(this).attr('id', 'node-'+index).removeClass("odd event").find('td :hidden').attr('value'); 
    // if it is a group, add special styles to row and remember row index 
    if (group == 'true') { 
     groupIndex = index; 
     $(this).addClass('odd').find("td:first") 
      .mouseenter(function() { 
       $(this).parent().addClass("swGroupLink"); 
      }) 
      .mouseleave(function() { 
       $(this).parent().removeClass("swGroupLink"); 
     }); 
    } else { 
     // make all following rows to children of the previous group found 
     $(this).addClass('even child-of-node-' + groupIndex); 
    } 
    }); 
} 

Answer 1

我建议两方面的改进：

• 缓存DOM References
• 工作在你的餐桌离线

例

function prepareTable() { 
    var groupIndex = 0; 
    var $mytable = $('#row'), 
     $parent = $mytable.parent(); 

    $mytable = $mytable.detach(); 

    $mytable.find('tr').each(function(index) { 
     var $this = $(this); 
     var group = $this.attr('id', 'node-'+index).removeClass("odd event").find('td :hidden').attr('value'); 
// if it is a group, add special styles to row and remember row index 
    if (group == 'true') { 
     groupIndex = index; 
     $this.addClass('odd').find("td:first") 
      .mouseenter(function() { 
       $this.parent().addClass("swGroupLink"); 
      }) 
      .mouseleave(function() { 
       $this.parent().removeClass("swGroupLink"); 
     }); 
    } else { 
     // make all following rows to children of the previous group found 
     $this.addClass('even child-of-node-' + groupIndex); 
    } 
    }); 

    $parent.append($mytable); 
} 

我添加了一个变量$this，它将$(this)缓存在您的.each()循环中。我还加入了$mytable和$parent。 $mytable存储#row元素，$parent存储#row的父节点。这是因为我从DOM中删除了整个元素，完成这些工作并将其重新附加到父级。

测试环境：http://www.jsfiddle.net/2C6fB/4/

如果仍然太慢，你还有其他选择这里。首先，看看你是否可以将循环分成更小的部分。您可以使用asychronous回调来优化，例如setTimeout。这可能是一个棘手的业务，我需要更详细地了解您的代码，但通常情况下，您可能只想将整个循环包装到单个setTimeout()函数中。示例 - >http://www.jsfiddle.net/2C6fB/5/

这可确保浏览器在操作时不会“挂起”。但是，当然这需要更长的时间才能完成整个任务。

Answer 2

我猜测发现是所有时间都消失的。

你能不能找到它的选择器吗？什么是HTML？

Answer 3

您可以将带鼠标的mouseenter和mouseleave带到实时事件的外面，这样它就不会用prepareTable函数执行，并且您可以将它放入文档就绪函数中。

$("#row tbody tr td.trueInPrepareTable") 
    .live("mouseenter", function(event){  
       $(this).parent().addClass("swGroupLink");  
    }).live("mouseleave", function(event){  
       $(this).parent().removeClass("swGroupLink");  
    }); 

不是从隐藏字段获取组值，而是将此值放在rel，rev或title属性中。

function prepareTableEdit() { 
       var groupIndex = 0; 
       $("#row tbody tr").each(function(index) { 
        groupIndex = index; 
        $(this).attr('id', 'node-'+ groupIndex).removeClass("odd even"); 
        if($(this).attr('rel') == 'true') 
        {       
         $(this).addClass('odd').find("td:first").addClass('trueInPrepareTable');      } 
        else 
        { 
         $(this).addClass('even child-of-node-' + groupIndex).find("td:first").removeClass('trueInPrepareTable'); 
        } 
       }); 

} 

退房http://www.jsfiddle.net/raBGq/