Javascript jquery复选框速度慢，不确定如何修复

我使用了firebug和IE分析器，可以看到代码中的哪些函数导致了速度缓慢。作为jquery的新手，我在网上读到的建议对我来说并不清楚。我制作了一个示例页面，显示当您选中或取消选中复选框时的缓慢行为。毫无疑问，使用Chrome的速度很快

可以在第139行找到慢速功能

$('.filters input').click( function() 

可以找到JSFIDLE

代码为122KB，可以找到

---

更新：如果您知道任何在线示例在功能上相似且速度更快，请与他人分享。

您可以将上下文与选择器一起使用：

$('.filters input', '#filters_container').click(function()...

---

这限制了jQuery在选择元素时必须查看的元素。与其查看页面中的每个元素，它只查看$（“#过滤器_容器”）元素内部。

您可以将上下文与选择器一起使用：

$('.filters input', '#filters_container').click(function()...

---

这限制了jQuery在选择元素时必须查看的元素。它没有查看页面中的每个元素，而是只查看$（“#filters_container”）元素的内部。

我简要查看了您的代码，但很难理解。好像你在很多次地循环着。我使用了一种更简单的方法来获得所有州的列表

你的方法是 *制作一个包含每个类的大型字符串（可能重复多次） *把它切成一排 *循环遍历阵列并删除重复项

我只是利用了这样一个事实，即当您在jQuery中选择某个内容时，您会得到一个集合而不是单个项目。因此，可以将更改应用于对象组

$(document).ready(function () {
    //this will hold all our states
    var allStates = [];

    //cache filterable items for future use
    var $itemsToFilter = $(".filterThis");

    //loop through all items. children() is fast because it searches ONLY immediate children
    $itemsToFilter.children("li").each(function() {

        //use plain ol' JS, no need for jQuery to get attribute
        var cssClass = this.getAttribute("class");

        //if we haven't already added the class
        //then add to the array
        if(!allStates[cssClass]) {
             allStates[cssClass] = true;
        }
    });

    //create the container for our filter
    $('<ul class="filters"><\/ul>').insertBefore('.filterThis');

    //cache the filter container for use in the loop
    //otherwise we have to select it every time!
    var $filters = $(".filters");

    // then build the filter checkboxes based on all the class names
    for(var key in allStates) {
        //make sure it's a key we added
        if(allStates.hasOwnProperty(key)) {
            //add our filter
            $filters.append('<li><input class="dynamicFilterInput" type="checkbox" checked="checked" value="'+key+'" id="filterID'+key+'" /><label for="filterID'+key+'">'+key+'<\/label><\/li>');
        }
    }

    // now lets give those filters something to do
    $filters.find('input').click( function() {
        //cache the current checkbox
        var $this = $(this);

        //select our items to filter
        var $targets = $itemsToFilter.children("li." + $this.val());

        //if the filter is checked, show them all items, otherwise hide
        $this.is(":checked") ? $targets.show() : $targets.hide();

    });
});

$（文档）.ready（函数（）{
//这将容纳我们所有的州
var-allStates=[]；
//缓存可筛选项以备将来使用
变量$itemsToFilter=$（“.filterThis”）；
//遍历所有项。children（）很快，因为它只搜索直接的子项
$itemsToFilter.children（“li”）。每个（函数（）{
//使用普通的ol'JS，不需要jQuery来获取属性
var cssClass=this.getAttribute（“类”）；
//如果我们还没有添加类
//然后添加到数组中
如果（！所有状态[cssClass]）{
所有状态[cssClass]=真；
}
});
//为我们的过滤器创建容器
$（'
）.insertBefore（'.filterThis'）；
//缓存筛选器容器以在循环中使用
//否则我们每次都要选择它！
变量$filters=$（“.filters”）；
//然后根据所有类名构建过滤器复选框
for（所有状态下的var键）{
//确保这是我们添加的一把钥匙
if（allStates.hasOwnProperty（键））{
//添加我们的过滤器
$filters.append（“
”+key+”）；
}
}
//现在让我们给这些过滤器做些事情
$filters.find（'input'）。单击（函数（）{
//缓存当前复选框
var$this=$（this）；
//选择要筛选的项目
var$targets=$itemsToFilter.children（“li.+$this.val（））；
//如果选中过滤器，则向其显示所有项目，否则隐藏
$this.is（“：checked”）？$targets.show（）：$targets.hide（）；
});
});

小提琴：

希望这有帮助：）

我注意到，如果你尝试滑动所有目标，它会运行得相当慢，这是因为有太多的项目同时被设置动画。您也可以将它们隐藏起来，因为人们只能看到列表顶部的幻灯片，因此这是在浪费处理器时间：）

---

编辑：我没有为show all添加逻辑，但是如果您按照我上面所做的操作进行操作，那么这应该是一个非常简单的添加，我对您的代码进行了简要的检查，但是很难理解。好像你在很多次地循环着。我使用了一种更简单的方法来获得所有州的列表

你的方法是 *制作一个包含每个类的大型字符串（可能重复多次） *把它切成一排 *循环遍历阵列并删除重复项

我只是利用了这样一个事实，即当您在jQuery中选择某个内容时，您会得到一个集合而不是单个项目。因此，可以将更改应用于对象组

$(document).ready(function () {
    //this will hold all our states
    var allStates = [];

    //cache filterable items for future use
    var $itemsToFilter = $(".filterThis");

    //loop through all items. children() is fast because it searches ONLY immediate children
    $itemsToFilter.children("li").each(function() {

        //use plain ol' JS, no need for jQuery to get attribute
        var cssClass = this.getAttribute("class");

        //if we haven't already added the class
        //then add to the array
        if(!allStates[cssClass]) {
             allStates[cssClass] = true;
        }
    });

    //create the container for our filter
    $('<ul class="filters"><\/ul>').insertBefore('.filterThis');

    //cache the filter container for use in the loop
    //otherwise we have to select it every time!
    var $filters = $(".filters");

    // then build the filter checkboxes based on all the class names
    for(var key in allStates) {
        //make sure it's a key we added
        if(allStates.hasOwnProperty(key)) {
            //add our filter
            $filters.append('<li><input class="dynamicFilterInput" type="checkbox" checked="checked" value="'+key+'" id="filterID'+key+'" /><label for="filterID'+key+'">'+key+'<\/label><\/li>');
        }
    }

    // now lets give those filters something to do
    $filters.find('input').click( function() {
        //cache the current checkbox
        var $this = $(this);

        //select our items to filter
        var $targets = $itemsToFilter.children("li." + $this.val());

        //if the filter is checked, show them all items, otherwise hide
        $this.is(":checked") ? $targets.show() : $targets.hide();

    });
});

$（文档）.ready（函数（）{
//这将容纳我们所有的州
var-allStates=[]；
//缓存可筛选项以备将来使用
变量$itemsToFilter=$（“.filterThis”）；
//遍历所有项。children（）很快，因为它只搜索直接的子项
$itemsToFilter.children（“li”）。每个（函数（）{
//使用普通的ol'JS，不需要jQuery来获取属性
var cssClass=this.getAttribute（“类”）；
//如果我们还没有添加类
//然后添加到数组中
如果（！所有状态[cssClass]）{
所有状态[cssClass]=真；
}
});
//为我们的过滤器创建容器
$（'
）.insertBefore（'.filterThis'）；
//缓存筛选器容器以在循环中使用
//否则我们每次都要选择它！
变量$filters=$（“.filters”）；
//然后根据所有类名构建过滤器复选框
for（所有状态下的var键）{
//确保这是我们添加的一把钥匙
if（allStates.hasOwnProperty（键））{
//添加我们的过滤器
$filters.append（“
”+key+”）；
}
}
//现在让我们给这些过滤器做些事情
$filters.find（'input'）。单击（函数（）{
//缓存当前复选框
var$this=$（this）；
//选择要筛选的项目
var$targets=$itemsToFilter.children（“li.+$this.val（））；
//如果选中过滤器，则向其显示所有项目，否则隐藏
$this.is（“：checked”）？$targets.show（）：$targets.hide（）；
});
});

小提琴：

希望这有帮助：）

我注意到如果你试着滑动，它会跑得慢一些