Улучшение производительности этого сценария jquery

Question

Это работает быстро по сравнению с другими. Но я не знаю, как быстро это будет на медленных компьютерах. Этот код фильтрует результаты по dymanically. Критерии устанавливаются в классе css ..

$(document).ready(function() 
{ 


    $("#filters a").click(function(event) 
    { 
     event.preventDefault(); 
     event.stopPropagation(); 
     if($(this).hasClass("checked")) 
     { 
      $(this).removeClass("checked"); 
     } 
     else if(!$(this).hasClass("disabled")) 
     { 
      $(this).addClass("checked"); 
     } 
     else 
      { 
       return false; 
      } 


     var results=$("#products li"); 
     results.hide(); 
     $("#filters li.filtersGroup a").removeClass("disabled"); 
     $("#filters li.filtersGroup").each(function(index) { 
      var classes=""; 

      $(this).find("a.checked").each(function(index) { 
       classes=classes+ "." + $(this).attr("id") +","; 
      }); 
      if(classes=="") return true; 

      results=results.filter(classes.substr(0,classes.length-1)); 
//periorismos 
       $("#filters li.filtersGroup").not($(this)).each(function (index){ 
        $(this).find("a").each(function(index) { 


       if(results.filter("." + $(this).attr("id")).length<=0) { 
         $(this).removeClass("checked").addClass("disabled"); 
        } 

      }); 



     }); 
    }); 
    results.show(); 



}) 
}); 

Любые идеи по его улучшению? Кроме того, что я могу делать preventdefault (itsnot срабатывает, если загружен весь документ разве, потому что это может быть проблемой для людей impacient ..

Answer 1

Одна вещь, которую я замечаю это вы делаете много ненужных вызовов $() :.

if($(this).hasClass("checked")) 
    { 
     $(this).removeClass("checked"); 
    } 
    else if(!$(this).hasClass("disabled")) 
    { 
     $(this).addClass("checked"); 
    } 
    else 
    { 
     return false; 
    } 

Каждый раз, когда вы делаете $(this), есть несколько вызовов, лежащих в основе функций и пара распределения памяти участвует Это полностью unnecssary Вобще:.

var $this = $(this); 

... в начале, а затем:

if($this.hasClass("checked")) 
    { 
     $this.removeClass("checked"); 
    } 
    else if(!$this.hasClass("disabled")) 
    { 
     $this.addClass("checked"); 
    } 
    else 
    { 
     return false; 
    } 

Это (не каламбур) относится к любому времени вы называете $(), а не только $(this), но вы должны быть уверены, что вы только кэшировать результат до тех пор, так как это действительно будет неизменным (так как это зависит от выбранного вами селектора или элемента). Например, вы не можете читать с помощью мелкозубчатой ​​гребенки, возможно, вы можете кэшировать результат $("#filters li.filtersGroup") хотя бы в одном месте, вместо того чтобы делать jQuery снова и снова.

Answer 2

Следующий в T.J. Ответ Crowder в

Вы также можете очистить ваши ссылки на $("#filters li.filterGroup") как этот

var $filtersGroup = $("#filters li.filtersGroup"); 
$("a", $filtersGroup).removeClass("disabled"); 
$filtersGroup.each(function(index) { 
    ..... 
)}