javascript - 在同一页面上的不同时间刷新多个 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))
})

这些目前都放置在部分 View 中。任何想法或建议将不胜感激。

编辑: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 函数，我认为以前没有发生过，请告诉我这是否有效。