Question

与其他人相比，这种运行速度很快。但我不知道它在慢速计算机上会有多快。该代码以动态方式过滤结果。标准在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

继T.J.克劳德的回应

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

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

提高此jquery脚本的性能

2 个答案: