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

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

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

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

12
задан Kev 5 December 2010 в 16:48
поделиться