JQuery флажок медленно, не уверен, как исправить

Question

Я использовал Firebug и IE профилировщики и могу видеть, какая функция в моем коде вызывает медлительность. Будучи новичком в jquery, рекомендации, которые я прочитал онлайн, мне не понятны. Я сделал пример страницы, которая показывает медленное поведение, когда вы устанавливаете или снимаете флажок. Не удивительно, что это быстро с помощью Chrome.

Медленную функцию можно найти в строке 139.

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

JSFiddle можно найти здесь

Код 122 КБ, его можно найти здесь

ОБНОВЛЕНИЕ: если вам известны какие-либо примеры в Интернете, которые похожи по функциям и работают быстрее, пожалуйста, поделитесь.

Answer 1

Я кратко просмотрел ваш код, но за ним было очень трудно следить.казалось, что вы проходили через много-много раз.я использовал гораздо более простой подход, чтобы получить список всех штатов.

ваш подход состоял в том, чтобы * создать массивную строку, содержащую каждый класс (возможно, повторяемый несколько раз) * разделить ее на массив *, проходить через массив и удалять дубликаты

я просто воспользовался преимуществомтот факт, что когда вы выбираете что-то в 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();

    });
});

FIDDLE: http://jsfiddle.net/bSr2X/6/

надеюсь, что это полезно :)

я заметил, что это работает довольно немногомедленнее, если вы пытаетесь сдвинуть все цели, это потому, что одновременно анимируется так много элементов.с тем же успехом вы можете просто скрыть их, так как люди будут видеть, как те, что находятся вверху списка, скользят внутрь и из поля зрения, так что это пустая трата процессорного времени:)

РЕДАКТИРОВАТЬ: я не добавиллогика для показа всего, но это должно быть довольно простым дополнением для вас, если вы будете следовать тому, как я это делал выше

Answer 2

Вы можете использовать контекст с вашим селектором:

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

это ограничивает элемент, который должен искать jQuery при выборе элементов.Вместо просмотра каждого элемента на странице, он просматривает только ваш элемент $ ('# filters_container').