在同一頁面上的不同時間刷新多個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

嘗試以下方法：

<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。 如果您有很多div，則可能值得一次更新多個容器（因此，該波實際上在下一波開始之前完成了）。 為wave設置一個隨機的開始，可以讓多個客戶端在不同的時間更新其div容器-這樣可以減輕服務器上的並發壓力。

為了更新單個div，我建議修改您的UpdateStatus（）函數，以便它更新由ProjectID標識的一個特定項目（您似乎可以訪問此信息，所以為什么不使用它）。 當UpdateStatus（ProjectID）功能完成時，您將獲取包含該項目信息的div並進行相應的更新。