刷新多個div在同一頁上的不同時間

Question

下面是我用來根據我的公司當前正在處理的項目數來製作單獨的div的代碼。每個div都包含項目的最新版本是否成功或失敗。

我目前有這個設置在120到180秒之間自動刷新。目前，每個div都會同時刷新。我喜歡它，所以每個div都會隨機刷新。

CSHMTL創建的div：

@if (Model.Client.ClientStatus != null && Model.Client.ClientStatus.Trim() != "InActive") 
{ 
<div class="span4 dashboard-success"> 

<div class="well dashboard-well" style="display:none;"> 
    <div class="loading">Loading...</div> 
    <div> 
     <div class="dashboard-link"> 

      <h3>@Html.ActionLink(Model.Client.ClientName, "Details", new { controller = "Client", ClientId = Model.Client.ClientID })</h3> 
     </div> 
    </div> 
    @foreach (var project in Model.Client.Projects) 
    { 

     <div>   
      <div class="dashboard-link"> 
       <h4>@Html.ActionLink(project.ProjectName, "Details/" + project.ProjectID, "project", new { controller = "Client", ClientId = Model.Client.ClientID }, 
        new { controller = "Project", ProjectId = project.ProjectID })</h4> 

      </div> 

     @if (project.ProjectStatus != null && project.ProjectStatus.Trim() != "InActive") 
     { 
      <table class="build table table-condensed"> 
       @foreach (var build in project.Builds) 
       {   


        <tr id="@project.ProjectName.Trim().ToLower().Replace(" ", "_").Replace(".", "").Replace("-", "").Replace("[", "").Replace("]", "")@build.BuildConfigID"> 
         <td>        
          <!--Adds a link back to client project build details--> 

           <a href = @Url.Content("client/" + Model.Client.ClientID.ToString() + "/project/" + 
             project.ProjectID + "/build/Details/" + build.BuildID)>@build.BuildName</a> 

         </td> 
         <td class="date"> 
         </td> 
         <td class="user"> 
         </td> 
         <td class="status"> 
         </td> 
        </tr>     
       } 
      </table> 
     } 
     </div> 
    } 
</div> 

的JavaScript處理頁面的刷新：

function random(x) { 
    return Math.floor(x * (Math.random() % 1)) 
} 

function randomBetween(MinV, MaxV) { 
    return MinV + random(MaxV - MinV + 1) 
} 

$(function() { 
    UpdateStatus(); 
    window.setInterval(UpdateStatus, randomBetween(120000, 180000)) 
}) 

這些都是當前擺在一個局部視圖。任何想法或建議將不勝感激。

編輯：爲UpdateStatus請求的代碼（）

function UpdateStatus() { 
    $(".dashboard-well").show().css({ 'background-color': "black", 'overflow': "hidden" }) 
    $(".loading").show() 
    $("td").hide() 
    $(".status").hide() 
    $.ajax 
    ({ 
     url: "/Build/AllStatuses", //New ULRs 
     dataType: 'json', 
     success: function (buildstatuses) { 

      for (var i in buildstatuses) { 
       var status = buildstatuses[i]; 
       var statusColor = 'black'; 
       switch (status.status) { 
        case "SUCCESS": 
         statusColor = "green"; 
         break; 
        case "FAILURE": 
         statusColor = "#99182C"; 
         break; 
        case "ERROR": 
         statusColor = "#CD950C"; 
         break; 
        default: 
         statusColor = "black"; 
         break; 
       } 
       var rowID = $.trim(new String(status.teamCityProject).toLowerCase().replace(/ /g, "_").replace(/\./g, "").replace(/-/g, "").replace(/\[/g, "").replace(/]/g, "")) + status.id; 


       $("tr#" + rowID + " td.status").html(status.status).css({ 'color': statusColor, 'font-weight': 'bolder' }) 
       if (status.status != "SUCCESS") { 



        var row = $("tr#" + rowID) 

        row.parent().parent().parent().parent().parent().removeClass("dashboard-success").addClass("dashboard-fail"); 

        row.parent().parent().prepend(row.clone()); // Places Failure at the top by cloning then removing 
        row.remove(); 

       } 

       $("tr#" + rowID + " td.date").html(status.date) 
       $("tr#" + rowID + " td.user").html(status.user) 

       // jQuery show hide 
       $(".loading").hide() 
       $(".dashboard-well").show().css({ 'background-color': "#D8D8D8", 'overflow': "auto" }) 
       $(".status").show() 
       $("td").show() 


      } 

      //Sets Failed results to the left 
      $("div.dashboard-fail").each(function() { 

       var div = $(this); 

       div.parent().prepend(div.clone()); 
       div.remove(); 

      }); 

      // Scroll to the bottom of the Div defined and scroll up --> See scroll function at top 

      scrollDown(); 
      scrollUp(); 
      scrollDown(); 
     } 

    }) 
} 
</script> 

Answer 1

嘗試一些沿行：這將被添加到您的.cshtml網頁

<script type="text/javascript"> 
$(function() { 
    UpdateStatus("@Model.Client.ClientID") 
    var random = randomBetween(120000, 180000) 

    window.setInterval(function(){ 
     UpdateStatus("@Model.Client.ClientID") 
    }, random) 
}) 
</script> 

，這將調用給updateStatus功能，我認爲之前沒有發生的事情，讓我知道如果這個作品。

Answer 2

我會建議對這些div完全隨機刷新，因爲隨機性有效地消除，甚至出應力在服務器上的可能性。

因此，我建議你使用隨機計數器觸發更新波，它將更新單個div，獲取新版本，然後更新下一個。如果你有很多div，可以一次更新多個容器（所以wave在下一次wave開始之前實際完成）可能是值得的。爲wave設置一個隨機啓動可以讓多個客戶端在不同的時間更新他們的div容器 - 這可以消除服務器上的併發壓力。

爲了更新單個div，我建議修改你的UpdateStatus（）函數，以便更新一個由ProjectID標識的特定項目（你似乎有權訪問這些信息，爲什麼不使用它）。當UpdateStatus（ProjectID）功能完成時，您將包含此項目信息的div並相應地更新它。