Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Оптимизация кода (https://javascript.ru/forum/jquery/4235-optimizaciya-koda.html)

Tohin 04.07.2009 11:51

Оптимизация кода
 
Есть код который ищет все элементы по классу (в данном случае точно известно, что их три, поэтому цикл организовывать было лень) и почереди их анимирует:
$('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. Как это правильно написать?

x-yuri 04.07.2009 21:42

Цитата:

Сообщение от Tohin
Который, естественно, не работает

сравни $('div.class') и anim[0] в отладчике

Цитата:

2. Как это правильно написать?
правильным будет вариант с одним поиском элементов, если он даст заметный прирост в производительности

Tohin 08.07.2009 21:19

Оптимизаия вроде дает результат....
 
Итак, внимание!
выполнение исходной версии кода (мерял файрбагом):
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)

Результат на лицо..... Еще идеи по оптимизаии есть?

e1f 09.07.2009 10:26

Конечно, на лицо. Сравнил 3 кривых поиска, без указания контекста, с одним :)
Еще быстрее будет, если написать вместо $('div.class')
$('div.class', '#container')

где #container -- то, что содержит твои три дива. А то так они у тебя ищутся по всей странице.

Tohin 09.07.2009 17:10

Цитата:

Сообщение от e1f (Сообщение 23963)
Конечно, на лицо. Сравнил 3 кривых поиска, без указания контекста, с одним :)
Еще быстрее будет, если написать вместо $('div.class')
$('div.class', '#container')

где #container -- то, что содержит твои три дива. А то так они у тебя ищутся по всей странице.

Еще более кривым было бы $('.class') А дивов на странице немного... Но попробую и со внешним #container'ом...
Правда не совсем понял что же возврашает $('div.class'), мне казалось что массис ссылок на дивы... Но почему тогда не работает
anim[0]?

e1f 09.07.2009 17:33

Вы имеете в виду, почему не работает anim[0].fadeIn()?
Логично, ведь anim[0] -- ссылка на DOM-объект, а у него нет метода fadeIn. anim.eq(0) - элемент jQuery, и у него уже есть соответствующие методы

Tohin 10.07.2009 21:36

Опять не понял....(Уж простите ламера)
Ведь если бы див был один то конструкция:
var anim= $('div.class');
        anim.fadeIn(1500).fadeOut(1500)

сработает..

Или конструкция $('div.class') возвращает разные объекты в зависимости от их кол-ва?
то есть кода див один то $('div.class') возвращает ссылку на элемент JQuery, а при наличии нескольких дивов ссылки на DOM-объкты?

e1f 11.07.2009 00:55

Нет, все время возвращает ссылку на елемент JQuery. Не работает так, как Вам надо, видимо потому, что Вы хотите поочередности, а в случае $('div.class').fadeIn(1500).fadeOut(1500) вся анимация будет идти одновременно. Для поочередности и надо делать так, как у Вас в посет #3, через callback


Часовой пояс GMT +3, время: 04:31.