У меня есть страница со списком аппаратных устройств, которые мы отслеживаем для клиентов. Каждая отображаемая строка также показывает состояние устройства, то есть работает ли оно, приостановлено, запускается и т. Д.
Чтобы сократить время загрузки страницы, я перечисляю устройства, но не запрашиваю их статус, пока страница не будет отображена. Это связано с тем, что на некоторые запросы, например через SNMP или другие API, может потребоваться до 5-10 секунд. Таким образом, для списка из десяти устройств может потребоваться более минуты, когда пользователь просматривает пустую страницу. Вместо этого я делаю следующее -
На странице со списком устройств у меня есть следующий сценарий:
$(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);
//...
});
});
});
Я обнаружил, что если я разрешаю запуск этого сценария, все ссылки на странице перестают отвечать.
Полагаю, это потому, что я Есть ли блокировка нескольких почти параллельных асинхронных запросов до тех пор, пока они не получат ответ от сервера и каким-то образом "поток пользовательского интерфейса" блокируется этим?
Однако я думал, что этого не должно было случиться с AJAX.
I обнаружите, что это «блокирующее» поведение происходит в IE8, Chrome 8.0 и Firefox 3.6. Фактически Chrome показывает стрелку курсора + вращающийся-унитаз-смерти (я использую Windows 7), как будто страница отображается не полностью.
Как я могу это исправить?