Очень медленная функция, есть ли более быстрый способ?(используя 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

вы можете вывести указатель мыши и отпуск мышью на улицу с помощью события live, чтобы оно не выполнялось с функцией 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');  
                    }
                });

 }

check http://www.jsfiddle.net/raBGq/

Answer 3

Я думаю, что находка - это та, где все время теряется.

Вы не можете сделать его селектор вместо находки. что такое HTML?