У меня есть механизм бронирования, который в IE7 работает довольно медленно. Он ajaxified и основан на изменении хэша / окна. Всего 5 ступеней. Основная проблема, с которой я столкнулся, заключается в том, что шаг 2 очень медленный в IE.
Когда пользователь переходит на шаг 2, делается запрос ajax для получения данных с помощью веб-служб для отображения гостиничных номеров. Гостиничные номера делятся на основные типы номеров и более специфические типы внутри. Функциональность JS, применяемая к гостиничным номерам, состоит из:
Все это вызывает известное:
Я погуглил и нашел это , this и this .
Очевидно, причина в том, что слишком много операторов сценария выполняются последовательно в течение определенного промежутка времени в IE.
Мне в основном нужно реорганизовать мой код и оптимизировать его так, чтобы между вызовами функций были задержки.
Я внедряю HTML после выполнения запроса ajax:
734 $( o.html ).appendTo( el )
o.html
- это ссылка на свойство объектов JSON html
, которое получено из здесь .
Затем выполняется следующий код:
setTimeout(function () {
$('#roomz .room-accordion').each(function () {
$(this).accordion({
header: 'h2.new-heading',
autoheight: false,
clearStyle: true,
collapsible: true,
change: function (event, ui) {
window.ui = ui;
// if it hasnt been quickflipped/subnest accordioned, do it
if (!$(ui.newContent).data('enabled')) {
$('.room-rates', ui.newContent).each(function () {
$(this).accordion({
header: 'h4.rate-name',
autoheight: false,
active: 0,
clearStyle: true
});
//if (!$.browser.msie)
$(this).jScrollPane();
})
$('.room-image', ui.newContent).quickFlip({
vvertical: true
//easing:'easeInBounce'
//easing:'easeInSine'
});
$('.back-copy-inner', ui.newContent).jScrollPane({
verticalDragMaxHeight: 131
});
$(ui.newContent).data('enabled', true);
}
}
})
var el = this;
setTimeout(function () {
$('.back-copy-inner:eq(0)', el).jScrollPane({
verticalDragMaxHeight: 131
});
}, 500);
$('.room-rates:eq(0)', this).each(function () {
$(this).accordion({
header: 'h4.rate-name',
autoheight: false,
active: 0,
clearStyle: true
});
var el = this;
setTimeout(function () {
//if (!$.browser.msie)
$(el).jScrollPane();
}, 50);
});
$('.room-image:eq(0)', this).quickFlip({
vvertical: true
//easing:'easeInBounce'
//easing:'easeInSine'
});
$('.room:eq(0)', this).data('enabled', true);
});
}, 20);
Моя первая версия кода в основном применяла quickflip и прокрутки к каждой комнате, было ли это спрятано в аккордеоне или нет. Реорганизованная версия (текущая / текущая) применяет ее к самой первой комнате, которая активна в аккордеоне, и когда через аккордеон щелкают по другой, я применяю к ней quickflip и scrollpane.
Я добавил setTimeout вокруг целиком, потому что это происходит после внедрения HTML. У меня внутри тоже есть setTimeout
.
Похоже, он все еще слишком медленный. Кто-нибудь может предложить какие-нибудь советы по рефакторингу / оптимизации?
Мои идеи по рефакторингу снова состоят из:
.each
на .room accordion
, применить повторяющуюся операцию, чтобы вызвать задержку в между каждой итерацией, как это ? blank.gif
, пока вы не активируете их через аккордеон Если кто-нибудь может высказать свое мнение по поводу моих идей по рефакторингу с точки зрения того, какие из них дадут лучшие результаты, это тоже было бы здорово. 12152] ССЫЛКИ:
new.js
(это фрагмент, который я вставил) PS - не поддерживает IE6
РЕДАКТИРОВАТЬ : я установил задержку между итерацией .each
, и это все еще очень медленно. Я думаю, что основная причина - это настраиваемая полоса прокрутки. Уф.
РЕДАКТИРОВАТЬ №2 : live code - это спагетти из setTimeouts. Я попытался лениво загрузить панель прокрутки, но она все еще слишком медленная для IE.