Обновление нескольких разделов в разное время на той же странице

Question

Ниже приведен код, который я использую для создания отдельных div, в зависимости от того, сколько проектов работает в моей компании. Каждый div содержит, были ли успешны или неудачны последние сборки на проектах.

В настоящее время у меня этот набор для автоматического обновления между 120 и 180 секундами. В настоящий момент каждый div будет обновляться одновременно. Мне бы хотелось, чтобы каждый div случайно обновлялся по своему усмотрению.

CSHMTL создание дивы:

@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)) 
}) 

Они все в настоящее время помещены в частичном виде. Любые мысли или предложения будут высоко оценены.

EDIT: Запрошенный код 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

попробовать что-то вдоль линий:

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

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

Это будет добавлено к вашей странице .cshtml, это будет вызывать функцию UpdateStatus, что я думаю, что не происходило раньше, дайте мне знать, если это работает ,

Answer 2

Я бы посоветовал против совершенно случайное обновление этих див, потому что хаотичность эффективно устраняет возможность выровнять нагрузку на сервере.

Я бы посоветовал вам использовать случайный счетчик для запуска волны обновления, которая будет обновлять один div, получать новую версию и затем обновлять следующую. Если у вас много div, возможно, стоит обновить сразу несколько контейнеров (так что волна на самом деле заканчивается до начала следующей волны). Настройка случайного запуска волны позволяет вам несколько раз обновлять свои контейнеры-контейнеры в разное время, что ускоряет одновременный стресс на вашем сервере.

Для обновления одного div я предлагаю изменить вашу функцию UpdateStatus(), чтобы он обновлял один конкретный проект, идентифицированный ProjectID (у вас, похоже, есть доступ к этой информации, поэтому почему бы не использовать его). Когда функция UpdateStatus (ProjectID) заканчивается, вы берете div, который содержит информацию этого проекта, и обновляете его соответствующим образом.