У меня есть страница, на которой я перечисляю аппаратные устройства, которые мы контролируем для клиентов. Каждая отображаемая строка также показывает состояние устройства, то есть, работает ли оно, приостанавливается, запускается и т.д.
Чтобы улучшить время загрузки страницы, я перечисляю устройства, но не запрашиваю их статус до отображения страницы. Это связано с тем, что некоторые запросы, например, через SNMP или другой API, могут занять до 5-10 секунд. Таким образом, для списка десяти устройств это может занять более минуты, когда пользователь смотрит на пустую страницу. Поэтому я делаю следующее:
На странице списка устройств у меня есть следующий script:
$(document).ready(function () {
var devices = $('div[name="runStatus"]');
devices.each(function () {
// Get device ID (I embed this using the HTML5 data-* attributes/annotations)
var deviceId = $(this).attr("data-deviceid");
var url = "/devmanager/status/" + deviceId;
$.getJSON(url, function (response) {
// Not actually important to the question...set text status, colours etc
$('div[data-deviceid="' + deviceId + '"]').text(response);
//...
});
});
});
Что я нахожу, так это то, что если я разрешаю запустить этот script, все ссылки на странице становятся невосприимчивыми.
Я предполагаю, что это связано с тем, что у меня довольно много параллельных асинхронных запросов, блокирующих до тех пор, пока они не получат ответ от сервера, и каким-то образом блокируется этим "поток пользовательского интерфейса"?
Однако я думал, что это не должно произойти с AJAX.
Я нахожу это "блокирующее" поведение в IE8, Chrome 8.0 и Firefox 3.6. Chrome фактически показывает стрелку + спиннинг-унитаз-смерт (я использую Windows 7), как если бы страница не была полностью отображена.
Как я могу это исправить?
