交錯加載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響應

回答

相關問題