Сбой функции из-за стольких итераций jQuery

Question

Сбой функции из-за стольких итераций jQuery

0

У меня есть страница с примерно 300 div, я переключаю их css, чтобы они были либо на 100%, либо на 200 пикселей. Моя функция работала, когда было только 10 или около того div, но теперь их так много, моя функция, похоже, падает.

Может ли кто-нибудь объяснить, почему это происходит или "улучшить" мою текущую функцию?

$('.grid').click(function () {
            $('.vacancy').animate({ opacity: 0 }, 500, function () {
                $(".vacancy").switchClass("listview", "gridview", 100);
                $(".vacancy").stop().animate({ opacity: 1 }, 500);
                $('a.gridView').removeClass('grid-active');
                $('a.listView').addClass('list-active');
            });
            return false;
});

$('.list').click(function () {
            $('.vacancy').animate({ opacity: 0 }, 500, function () {
                $(".vacancy").switchClass("gridview", "listview", 100);
                $(".vacancy").stop().animate({ opacity: 1 }, 500);
                $('a.gridView').removeClass('grid-active');
                $('a.listView').addClass('list-active');
            });
            return false;
});

Liam 18 дек. 2013, в 18:03

Источник

0

Можете ли вы опубликовать свой HTML и CSS тоже? Может быть, jsfiddle?
Trufa 18 дек. 2013, в 16:30
0

Обычно, когда я сталкиваюсь с проблемами производительности jQuery, я возвращаюсь к нативному javascript. Может быть, вы можете поставить в очередь свои анимации, чтобы запустить их все сразу?
A1rPun 18 дек. 2013, в 16:31
0

Да, с скрипкой было бы намного легче разобраться. Кроме того, анимации jQuery относительно тяжелы в браузере. Вы рассматривали анимацию CSS?
wrxsti 18 дек. 2013, в 16:31

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Можете ли вы опубликовать свой HTML и CSS тоже? Может быть, jsfiddle?
Обычно, когда я сталкиваюсь с проблемами производительности jQuery, я возвращаюсь к нативному javascript. Может быть, вы можете поставить в очередь свои анимации, чтобы запустить их все сразу?
Да, с скрипкой было бы намного легче разобраться. Кроме того, анимации jQuery относительно тяжелы в браузере. Вы рассматривали анимацию CSS?

Jason P · Answer 1 · 2013-12-18T13-46-00.000Z

Функция обратного вызова запускается для каждого анимированного элемента.

Если у вас есть .vacancy, обратный вызов будет выполняться 300 раз. Каждый раз, когда выполняется обратный вызов, $(".vacancy").switchClass() будет вызываться для 300 элементов. 300 x 300... много.

Вы можете начать с использования this в обратном вызове:

$('.grid').click(function () {
        $('.vacancy').animate({ opacity: 0 }, 500, function () {
            $(this).switchClass("listview", "gridview", 100);
            $(this).stop().animate({ opacity: 1 }, 500);
            $('a.gridView').removeClass('grid-active');
            $('a.listView').addClass('list-active');
        });
        return false;
});

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

Здесь скрипка с демонстрацией: http://jsfiddle.net/jkcY3/

$.fn.logMe = function() {
    return this.each(function() {
        console.log('logMe called', this); 
    });
};

$('.vacancy').animate({ opacity: 0 }, 500, function() {
   $('.vacancy').logMe();
});

Если бы у меня было 300 div, я бы получил 90000 вызовов logMe();