Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   сценарий замедляет работу IE (https://javascript.ru/forum/jquery/8218-scenarijj-zamedlyaet-rabotu-ie.html)

subzey 15.03.2010 17:56
Мне кажется, достаточно будет вынуть из документа select. А, если точнее, не вставлять его в документ, пока все манипуляции не будут окончены. Да и вообще, не лучше ли формировать из этого массив, а потом одним куском вставить в innerHTML?

Shaci 15.03.2010 18:05
Цитата:
Сообщение от e1f (Сообщение 47748)
Возможно, стоит переписать не скучей аппендов, а с использованием DocumentFragment
Спс , помогло, но дальше на обработчике событий проблема та же, в принципе это ожидалось ((
function _parentChange($parent, $child, $group, $holder_cls, $child_cls, i){
		$($parent).bind('change', function(vary){return function(){
			$($child).find('option:not(:first)').remove();            
			$index = $($group).index($(this));    			
			if( $param.group != '' ){                
                $($group+':gt('+ $index +')').find('option:not(:first)').remove();
			}
			$value = $(this).find('option:selected').attr('value');

            if($value) {
            if(vary[i][$value]){
            for(var j = 0; j < vary[i][$value].length; j++) {
			$($holder_cls+$child_cls).find('option[value='+vary[i][$value][j]+']').each(function(){
				$value1 = $(this).attr('value');
				$class = $(this).attr('class');
				$title = $(this).attr('title');
				$text  = $(this).attr('text');
				$($child).append('<option value="'+$value1+'" class="'+$class+'" title="'+$title+'">'+$text+'</option>');
			});
            }
            }
            }
            $($child).change();
        }
		}($param.myObj));
	}


он переписан мной (может конешн и криво написан, но работает, учитывает оба режима плагина)
Обработчик change на родителе ищет option в скрытом селекте и кидает их в соостветствующий ему дочерний селект .
Так вот этот процесс поиска в IE занимает много времени, и здесь, похоже уже ничего не сделать.
Вот эта строка:
$($holder_cls+$child_cls).find('option[value='+vary[i][$value][j]+']').each(function(){
тянет время, даже если в цикле пусто,
если закомменчю её, то все ОК(по скорости).

e1f 15.03.2010 18:43
Охтыжепт.
1. Цикл for убрать, это можно сделать одной выборкой + each.
2. Внутри each не делать 4 раза создание jQuery-объекта и запрос атрибута.
3. Если не нужно заполнять существующий select, то имеет смысл, как уже сказал subzey, сделать все через innerHTML. Добавить опшны в селект через innerHTML не выйдет -- персональный бок ИЕ.

Shaci 16.03.2010 00:12
Цитата:
Сообщение от e1f (Сообщение 47768)
Охтыжепт.
-ну, да :), но я пока учусь
Цитата:
Сообщение от e1f;
2. Внутри each не делать 4 раза создание jQuery-объекта и запрос атрибута.
- не поможет, в данном случае это несильно повлияет
тутс вложенный цикл 
for(var j = 0; j < vary[i][$value].length; j++) {
			$($holder_cls+$child_cls).find('option[value='+vary[i][$value][j]+']')

долго выполняется

e1f 16.03.2010 01:14
А если вместо всего for'a сделать просто
$($holder_cls+$child_cls+' > option').each() // ...

Ну и, как уже упоминалось -- либо пересоздавать весь скрытый селект заново с помощью innerHTML, либо использовать DocumentFragment.

Shaci 16.03.2010 21:26
Вложений: 1
for убрать,наверно не получится
Дело в том, что:
Цитата:
Если вкратце, есть плагин, он небольшой:
http://plugins.jquery.com/project/De...SelectbySilVeR
зависимых селектов, в котором зависимость одного селекта от другого указывается на основе tilte родителя, и class зависимого селекта.
В зависимости от того, что кидается ему внутрь, может работать в двух режимах.Когда несколько селектов зависят от одного, и когда зависимость по цепочке.
Т.е. было так:
$('#child_id').dependent({ parent: 'parend_id', group: 'common_class' });
<b>My case</b>
$('#selectme2').dependent({ parent: 'selectme', group: 'selectable' });
$('#selectme3').dependent({ parent: 'selectme2', group: 'selectable' });

Для зависимости "по цепочке"
И так
$('#child_id').dependent({ parent: 'parend_id' });
<b>My case</b>
$('#selectme4, #selectme5').dependent({ parent: 'selectme3' });

при зависимости кучи селектов от одного , ну и + необходимо было указывать title и class у этих селектов.

Цитата:
Я переделал его так, чтобы зависимость была не на основе title и class, а на основе value "опшионов"
И теперь при запуске в режиме, когда от одного зависят все:
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript" src="jquery.myDepend.js"></script>

<style>
    .selectable{width:60}
</style>

<script type="text/javascript">
    jQuery(function($){$("#selectme1,#selectme2").dependent({parent:"selectme", myObj:'[{"0":[7,107,13],"3":[7,107],"6":[13]},{"0":[1000,68,1100],"3":[1000,68],"6":[1100]}]'}); $("#selectme").change();
    });
    </script>
<select name="selectme" id="selectme" class="selectable">
    <option value="0"></option>
    <option value="3" selected="selected">Opt3</option>

    <option value="6">Opt6</option>
</select>

<select name="selectme1" id="selectme1" class="selectable">
    <option value="0"></option>
    <option value="7">Opt3</option>
    <option value="107">Opt3</option>
    <option value="13">Opt6</option>

</select>

<select name="selectme2" id="selectme2" class="selectable">
    <option value="0"></option>
    <option value="1000">Opt3</option>
     <option value="68">Opt3</option>
    <option value="1100">Opt6</option>
</select>


И параметр myObj, как раз и указывает эти зависимости:
myObj:'[{"0":[7,107,13],"3":[7,107],"6":[13]},{"0":[1000,68,1100],"3":[1000,68],"6":[1100]}]'
Т.е. при Value 0 у родителя, выбрать option с value 7, 107, 13 у первого
селекта, и 1000, 68, 1100 у второго. и.т.д.

и в случае зависимости по цепочке:
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript" src="jquery.myDepend.js"></script>

<style>
    .selectable{width:60}
</style>

<script type="text/javascript">
    jQuery(function($){$("#selectme1").dependent({parent:"selectme", myObj:'[[[0,2,4,7,8,9],[2,4,7],[8,9]]]', group:"selectable"});$("#selectme2").dependent({parent:"selectme1", myObj:'[{"0":[0,5,6,7,29],"2":[5],"4":[5],"7":[5],"8":[7,6],"9":[29]}]', group:"selectable"});$("#selectme").change();
    });
    </script>
<select name="selectme" id="selectme" class="selectable">
    <option value="0"></option>
    <option value="1">Opt1</option>

    <option value="2">Opt2</option>
</select>

<select name="selectme1" id="selectme1" class="selectable">
    <option value="0"></option>
    <option value="2">Opt1</option>
    <option value="4">Opt1</option>
    <option value="7">Opt1</option>

    <option value="8">Opt2</option>
    <option value="9">Opt2</option>
</select>

<select name="selectme2" id="selectme2" class="selectable">
    <option value="0"></option>
    <option value="5">Opt247</option>
    <option value="6">Opt8</option>

    <option value="7">Opt8</option>
    <option value="29">Opt9</option>
</select>

$("#selectme1").dependent({parent:"selectme", myObj:'[[[0,2,4,7,8,9],[2,4,7],[8,9]]]', group:"selectable"}:
Здесь, при выборе у selectme option c value 0 у selectme1 выберутся 0,2,4,7,8,9
при 1 - 2,4,7 , ну и.т.д.
Причем метод может получать myObj как в виде массива массивов (как выше)
так и в виде массива объектов, как ниже
$("#selectme2").dependent({parent:"selectme1", myObj:'[{"0":[0,5,6,7,29],"2":[5],"4":[5],"7":[5],"8":[7,6],"9":[29]}]', group:"selectable"}
Связанно это с тем, что 
<script type="text/javascript">
    jQuery(function($){$("#selectme1").dependent({parent:"selectme", myObj:'[[[0,2,4,7,8,9],[2,4,7],[8,9]]]', group:"selectable"});$("#selectme2").dependent({parent:"selectme1", myObj:'[{"0":[0,5,6,7,29],"2":[5],"4":[5],"7":[5],"8":[7,6],"9":[29]}]', group:"selectable"});$("#selectme").change();
    });
    </script>
этот кусок генерится php ф-цией, в которую входит ф-ция array2json, которой,на вход поступает php массив, сгенерированный на основе запросов из базы данных,( и она в зависимости от того как в массиве идут индексы, по порядку, или нет, может создавать либо массив массивов, либо массив объектов).
Но это не важно.

А по поводу вложенных циклов:
for(var j = 0; j < vary[i][$value].length; j++) {
$($holder_cls+$child_cls).find('option[value='+vary[i][$value][j]+']')
- это нужно, чтобы шагать по myObj, и находить соответствия между option селектов, пока optionов не много то все нормально, но когда их с тысячу и больше, тормозит в IE.

i - это элемент массива myObj (массив или объект), показывающий зависимость дочернего селекта от родительского (в случае зависимости по цепочке - single, i - всегда 0)
$value - текущее value выбранного option(у родительского элемента), и элемент i-го массива,
его элементы - value тех option, которые должны будут выбраны

Похоже, тут вообще линейный поиск по неупорядоченному массиву получается
, хотел отсортировать и производить поиск по сортированному массиву, но сортировка в IE занимает еще больше места
Как вариант табличку повесить, подождите, идет загрузка)).

Здесь плагин (без documentFragment) если вдруг интересно станет (более месяця назад его делал, так что, возможно, многое можно поменять, но он рабочий)

Shaci 17.03.2010 19:15
Переписал плагин по другому принципу и избавился от вложенных циклов, не тормозит.:dance:


Часовой пояс GMT +3, время: 06:30.
Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице