“Прекратите запускать этот скрипт” - IE для больших запросов Ajax
Я использую jQuery.getJSON (...) для создания ответа вызова/процесса для немного большого набора данных. Так как время отклика является несколькими секундами, ожидается (существует анимированная загрузка, графическая для умиротворения пользователя).
Все сказанные, графическая загрузка, ответ, процесс, и т.д. хорошо работают во всех браузерах. В Internet Explorer (6/7/8), однако, появляется "Остановка, выполняющая этот сценарий" ошибка. Если позволено продолжиться, сценарий завершается без проблемы.
$(document).ready(function() {
$("#tree").treeview({ collapsed: true, animated: "slow" });
$("#tree").hide();
$("#loadingGraphic").fadeIn("slow");
$.getJSON("mygenerichandler.ashx", function(data) {
//manipulate data and add to treeview
$("#loadingGraphic").fadeOut("slow", function() {
$("#tree").slideDown("slow");
});
});
});
Я понимаю, что этот Internet Explorer имеет предпочтение, которое можно установить с помощью реестра Windows, однако, мне любопытно, как другие разработчики обрабатывают ожидаемые большие или медленные ответы назад в запросе Ajax.
4 ответа
Уведомление о медленном сценарии, скорее всего, относится не к фактическому запросу, а к сценарию, который вы запускаете для обработки данных, полученных по запросу. Это также может быть код jQuery, который анализирует ваш JSON.
Если вы разместите свой скрипт, который «манипулирует данными» (то есть прокомментированная часть вашего фрагмента), мы, возможно, сможем помочь в его оптимизации.
[Изменить] Вы правы. Вам следует подумать о ленивой загрузке дерева. Сколько у вас обычно корневых узлов? Возможно, вам повезет с извлечением appendTo () из цикла. Либо создайте весь HTML за один раз и выполните массивный appendTo () , либо используйте промежуточный div, не прикрепленный к DOM, для накопления узлов, а затем добавьте его к основному элементу #tree .
var tempDiv = $('<div></div>');
for (var i in data) {
tempDiv.append($(buildHierarchy(data[i]));
}
$("#tree").append(tempDiv);
$("#tree").treeview({ add: tempDiv }); //don't know if this works? Maybe tempDiv.children() ?
Я предполагаю, что это не загрузка данных и не обработка данных, которые вы выполняете в коде. Я думаю, что это преобразование данных JSON, полученных по HTTP, в объект Javascript.
IE в основном выполняет eval () для построения хэша из строковых данных. Это очень, очень и очень неэффективно для длинных струн. Я подозреваю, что за этим стоит алгоритм Schlemiel the Painter . У меня было то же самое год или два назад, и я решил это, удалив неиспользуемые или избыточные данные из строки JSON.
Если вы не можете сократить строку, удаляя элементы, вы можете попробовать разрезать строку на сервер, разбив его на объекты-компоненты ( 'страницы' , если хотите) и загрузите их по очереди.
Проблема не во времени запроса. Запрос является асинхронным, поэтому пока вы ждете ответа, скрипт не запускается.
Это скрипт, обрабатывающий результат, который занимает слишком много времени. Отправьте его функции, которая обрабатывает часть данных и вызывает себя с помощью таймера, чтобы на мгновение вернуть управление браузеру:
function handleData(data, offset) {
// pick the next 1000 items or so:
var size = Math.min(1000, data.length - offset);
// process [offset .. offset+size-1] of the data
// ...
offset += size;
if (offset < data.length) {
window.setTimeout(function() { handleData(data, offset); }, 1);
} else {
$("#loadingGraphic").fadeOut("slow", function() {
$("#tree").slideDown("slow");
});
}
}
Вызовите его с помощью:
$.getJSON("mygenerichandler.ashx", function(data) {
handleData(data, 0);
});
Вы можете провести рефакторинг кода так, чтобы вы вызывали setTimeout (0) перед каждым рекурсивным вызовом, чтобы поток пользовательского интерфейса получил контроль и мог реагировать. Google 'setTimeout threading' для получения дополнительной информации.
Вы также можете разбить большой набор данных на блоки, обрабатываемые последовательными запросами. В IE8 вы можете дважды проверить, что используется собственный метод JSON.parse (), поскольку он быстрее, чем реализация JS.