пошаговая загрузка ответов ajax

Question

У меня есть страница, которая отображает состояние всех объектов в данном наборе схем базы данных.Объекты схемы отображаются в виде иерархического дерева (схема> тип объекта> имя объекта).Есть много (тысячи) объектов.Статус связан с управлением исходным кодом (объект изменен / удален / добавлен / не изменился по сравнению с версией, управляемой исходным кодом?).

Я использую немного ajax для загрузки значка, отображающего состояние каждого объектапри этом предполагается, что статус может отображаться всякий раз, когда завершается асинхронная проверка.Что происходит на самом деле, так это то, что значки загрузки зависают, и после того, как все запросы о разрешении statii разрешены, все значки отображаются одновременно.Это непреднамеренно и придает загрузке страницы нежелательное и отчетливо синхронное ощущение.Я предусмотрел, чтобы значки загрузки менялись по отдельности на правильный значок состояния в каком-то пошаговом порядке.

Как я могу изменить свой JavaScript, чтобы повысить удобство работы (значки переходят от загрузки gif к состоянию png по отдельности, а не ко всемв то же время)?

Вот код:

$(window).load(function () {
@foreach (var schema in Model) {
    foreach (var o in schema.Objects) {
        @:$.getJSON('@Url.Action("ObjectStatus")', {service:'@schema.Service', schema:'@schema.Name', objectName:'@o.Name', objectType:'@o.Type'}, function (data) {
            @:$('#@string.Format("{0}-{1}", schema.Name, o.Name)').attr('src', '/Content/images/' + data + '.png');
        @:});
    }
}
});

...

<ul id="treeview">
@foreach (var schema in Model)
{
    <li>@schema.Name<br />
        <ul>
        @foreach (var t in schema.Objects.Select(x=>x.Type).Distinct())
        {
            var objectType = t;
            <li>@string.Format("{0}{1}", objectType, objectType.EndsWith("x") ? "es" : "s")<br />   
                <ul>
                @foreach (var o in schema.Objects.Where(x => x.Type == objectType))
                {
                    <li>
                        <img src="@Url.Content("~/Content/images/loading.gif")" alt="checking status..." id="@string.Format("{0}-{1}", schema.Name, o.Name)"/>
                        @Html.ActionLink(o.Name, "Diff", "Browse", new { service = schema.Service, schema = schema.Name, objectName = o.Name, objectType }, null)
                    </li>
                }
                </ul>
            </li>
        }
        </ul>
    </li>
}
</ul>

и вот как выглядит готовое дерево:

Answer 1

Вы не получите истинного «многопоточного» внешнего вида с помощью javascript;это просто не доступно.

Что вы можете сделать, это поместить все ваши запросы в массив, а затем shift первый элемент из списка для вашего следующего запроса AJAX.

function getResponse()
{
    if(myRequestArray.length == 0)
       return;

    var elementToRequest = myRequestArray.shift();

    $.ajax({
       url: '/some/url/',
       data: { someData: elementToRequest.someData },
       success: getResponse
    });
}

Ваш обратный вызов будет вызванным методом, поэтому вы начнете следующий запрос.Таким образом, ваш пользовательский интерфейс может оставаться «отзывчивым», пока выполняются запросы ajax.Это будет выглядеть синхронно, только если порядок элементов в массиве обновляется по порядку.

Answer 2

Возможно, это не лучшее решение, но попробуйте это ..

установите

async : false

на вызов jquery ..