Question

我有一个页面，显示给定数据库模式集中所有对象的状态。模式对象显示为分层树（模式＆gt;对象类型＆gt;对象名称）。有很多（数千）对象。状态是与源控件相关的（与源控制版本相比，对象是被修改/删除/添加/未更改的吗？）。

我使用一些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>

这是完成的树的样子：

tree view

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请求完成时，您的UI可以保持“响应”。只要数组中元素的排序按顺序更新，它就会显示为同步。

Answer 2

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

组

async : false

在你的jquery电话上

..

交错加载ajax响应

2 个答案: