错开加载 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
    });
}

您的回调将是调用的方法，因此您开始下一个请求。这样，您的 UI 可以在 ajax 请求完成时保持“响应式”。仅当数组中元素的顺序按顺序更新时，它才会显示为同步的。

Answer 2

可能不是最好的解决方案，但试试这个..

设置

async : false

在您的 jquery 调用中..