提高此jquery脚本的性能

这比其他人跑得快。但我不知道它在慢速计算机上会有多快。代码会动态地过滤结果。 标准在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(); }) }); 

任何想法如何改善它？ 另外我可以做些什么来防止默认（如果整个文件没有被加载，它就不会被触发，因为这对于不方便的人来说可能是一个问题..

Answer 1

我注意到的一件事是你正在对$()进行大量不必要的调用：

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

每次执行$(this) ，都会涉及多个底层函数调用和几个内存分配。 这完全是不必要的。 做就是了：

 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

接下来是TJ Crowder的回应

您也可以像这样清理对$("#filters li.filterGroup")引用

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