Оптимизация кода
Есть код который ищет все элементы по классу (в данном случае точно известно, что их три, поэтому цикл организовывать было лень) и почереди их анимирует:
$('div.class').eq(0).fadeIn(1500).fadeOut(1500,function() { $('div.class').eq(1).fadeIn(1500).fadeOut(1500,function() { $('div.class').eq(2).fadeIn(1500); }); }); Мне не нравится что трижды производится поиск объектов ради того чтобы выбрать один из результата. в результате бреда воспаленного сознания родился код: var anim= $('div.class'); anim[0].fadeIn(1500).fadeOut(1500,function() { anim[1].fadeIn(1500).fadeOut(1500,function() { anim[2].fadeIn(1500); }); }); Который, естественно, не работает. В связи чем 2 вопроса: 1. А оно вообще надо? То есть будет ли хоть какая-то экономия ресурсов? 2. Как это правильно написать? |
Цитата:
Цитата:
|
Оптимизаия вроде дает результат....
Итак, внимание!
выполнение исходной версии кода (мерял файрбагом): Profile (125.403ms, 2351 calls) Слегка видоизмененный код: var anim= $('div.class'); anim.eq(0).fadeIn(1500).fadeOut(1500,function() { anim.eq(1).fadeIn(1500).fadeOut(1500,function() { anim.eq(2).fadeIn(1500); }); }); Profile (68.573ms, 1149 calls) Результат на лицо..... Еще идеи по оптимизаии есть? |
Конечно, на лицо. Сравнил 3 кривых поиска, без указания контекста, с одним :)
Еще быстрее будет, если написать вместо $('div.class') $('div.class', '#container') где #container -- то, что содержит твои три дива. А то так они у тебя ищутся по всей странице. |
Цитата:
Правда не совсем понял что же возврашает $('div.class'), мне казалось что массис ссылок на дивы... Но почему тогда не работает anim[0]? |
Вы имеете в виду, почему не работает anim[0].fadeIn()?
Логично, ведь anim[0] -- ссылка на DOM-объект, а у него нет метода fadeIn. anim.eq(0) - элемент jQuery, и у него уже есть соответствующие методы |
Опять не понял....(Уж простите ламера)
Ведь если бы див был один то конструкция: var anim= $('div.class'); anim.fadeIn(1500).fadeOut(1500) сработает.. Или конструкция $('div.class') возвращает разные объекты в зависимости от их кол-ва? то есть кода див один то $('div.class') возвращает ссылку на элемент JQuery, а при наличии нескольких дивов ссылки на DOM-объкты? |
Нет, все время возвращает ссылку на елемент JQuery. Не работает так, как Вам надо, видимо потому, что Вы хотите поочередности, а в случае $('div.class').fadeIn(1500).fadeOut(1500) вся анимация будет идти одновременно. Для поочередности и надо делать так, как у Вас в посет #3, через callback
|
Часовой пояс GMT +3, время: 12:34. |