Почему $.getJSON() блокирует браузер?

У меня есть страница, на которой я перечисляю аппаратные устройства, которые мы контролируем для клиентов. Каждая отображаемая строка также показывает состояние устройства, то есть, работает ли оно, приостанавливается, запускается и т.д.

Чтобы улучшить время загрузки страницы, я перечисляю устройства, но не запрашиваю их статус до отображения страницы. Это связано с тем, что некоторые запросы, например, через 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), как если бы страница не была полностью отображена.

Как я могу это исправить?

Ответы

$('div[data-deviceid="' + deviceId + '"]').text(response);