交错加载ajax响应

我有一个页面，显示给定的一组数据库模式中的所有对象的状态。模式对象显示为分层树（模式>对象类型>对象名称）。有很多（数千）对象。状态与源控制相关（与源控制版本相比，是修改/删除/添加/未更改的对象？）。交错加载ajax响应

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

来源

2011-08-22 grenade

你想让更新按顺序发生，或者按照它们返回的顺序发生？ – Tejs

对订单没有影响，只是希望他们在同一时间单独加载而不是全部加载。 – grenade

也许不是最好的解决办法在那里，但试试这个..

设置

async : false

您的jQuery电话..

来源

2011-08-22 18:39:53

你不会得到一个真正的“多线程”的外观和使用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可以保持“响应”。只有在数组中元素的顺序按顺序更新时，才会出现同步。

来源

2011-08-22 18:50:46 Tejs

这看起来很有希望...... – grenade

您的成功回调将需要额外的代码（包括再次调用）来更新图像，但是您得到的想法= D – Tejs

交错加载ajax响应

回答

相关问题