慢JQuery函數

Question

我有一個這樣的功能在JQuery和JS。我有一個帶有複選框的div列表，並將它們添加到我的列表中。這適用於40個div，但有時我有2000個，它會崩潰Chrome並在FF上爬行。無論如何，讓這個更快？

function AddToList() 
{ 
    $('div[name="notadded"] input:checked').each(function(index) 
    { 
     var html = $(this).parents('div[name="notadded"]').html(); 

     //get rid of the class that is used to gather checkboxes in select/deselect 
     html = html.replace('listvars', 'addedvars'); 

     var var_id = $(this).attr('value'); 

     var new_html = '<div id="added_' + var_id + '" name="added">' + html + '</div>'; 

     //hide the one we are adding and remove the check 
     $(this).parents('div[name="notadded"]').hide(); 
     $('div[name="notadded"] input[value="' + var_id + '"]').attr('checked', false); 

     //add the vars to the added list 
     $('.addedList').append(new_html); 

     step3 = '3b'; 
    }); 
} 

Answer 1

您正在做2000個DOM操作，不是一個好的方法。嘗試做2000個字符串操作和一個DOM插入。

function AddToList() 
{ 
    var new_html = ""; 

    $('div[name="notadded"] input:checked').each(function(index) 
    { 
     var html = $(this).parents('div[name="notadded"]').html(); 

     //get rid of the class that is used to gather checkboxes in select/deselect 
     html = html.replace('listvars', 'addedvars'); 

     var var_id = $(this).attr('value'); 

     var new_html += '<div id="added_' + var_id + '" name="added">' + html + '</div>'; 

     //hide the one we are adding and remove the check 
     $(this).parents('div[name="notadded"]').hide(); 
     $('div[name="notadded"] input[value="' + var_id + '"]').attr('checked', false); 

     //add the vars to the added list 
     step3 = '3b'; 
    }); 

    $('.addedList').append(new_html); 
} 

另外，根據經驗，取消選中2000複選框會嚴重影響性能。我會打這條線：

$('div[name="notadded"] input[value="' + var_id + '"]').attr('checked', false); 

會改變一切。我建議重寫這個函數作爲一個字符串替換，這將是一個快很多的方式。