Question

我在工作中有一个仪表板站点，它使用SpringMVC，FusionCharts和Bootstrap（以提供架构概述）。当我刚刚启动Tomcat服务器时，我第一次服务于索引页面时，一组按钮将无法正常呈现。我在3个javascript函数的第一个中得到了带有问号的正确白色圆圈数。如果我刷新页面，则会立即出现预期的红色和绿色结果，由第二个脚本函数生成。

作为序言，带有按钮的面板可以正确生成，具有正确的计数，正确的名称，正确的HREF和其他所有内容。在页面刷新之前，颜色不会改变。回到最初构建这个项目时，数据是通过http请求服务器端收集的。它现在发生的速度相对较慢：从文件服务器端加载数据并以相同的格式发送数据。在等待10秒后，旧方法总是产生正确的颜色和图标。现在，按钮只是保持空白，直到我刷新页面，然后我得到了正确的结果。

我相信这只是两个Javascript函数相互踩踏的结果，即使我知道JavaScript是单线程的。如果没有，我就难倒了。

的index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Free Bootstrap Admin Template : Dream</title>
<!-- Bootstrap Styles-->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="css/font-awesome.css" rel="stylesheet" />
<!-- Morris Chart Styles-->
<link href="js/morris/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />

<script type="text/javascript" src="js/fusioncharts/core/fusioncharts.js"></script>
<script type="text/javascript" src="js/fusioncharts/themes/fusioncharts.theme.fint.js"></script>


</head>
<body> 

...

<!-- this is where the button panel is correctly created on every load
     but only correctly modified on the 2nd load and later -->
<div class="row"> <div id="AppStatusTable"></div> </div>

...

<script src="js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="js/morris/raphael-2.1.0.min.js"></script>
<script src="js/morris/morris.js"></script>


<!-- Custom Js -->
    <!--
<script src="js/custom-scripts.js"></script>  -->
<script>

    $(document).ready(function(){
        $.get("/buttoninfo", function(data, status) {
            tableMaker(data, "AppStatusTable");
        });

        $.get("/appstatus", function(data, status) {
            appStatus(data);
        });

        $.get("/stackstatus", function(data, status) {
            stackUpdater(data);
        });

    });
</script>
</body>

最后3个函数填充面板的html以包含动态数量的按钮，修改这些按钮的内部html，然后更新其他面板。第三个目前需要一段时间，并始终产生正确的结果。我不怀疑这是问题所在。

dashboard.js

function templateLoader(appTag) {
    //$.get('/app/' + appTag);
    window.location = "/app/" + appTag;
}

function appStatus(data){

    for(var i = 0; i < data.length; ++i) {
        if(data[i][1] == "up"){
            $("#" + data[i][0] + "-appcheck").removeClass("btn-default");
            $("#" + data[i][0] + "-appcheck").addClass("btn-success");
            $("#" + data[i][0] + "-appcheck-icon").removeClass("fa-exclamation-circle");
            $("#" + data[i][0] + "-appcheck-icon").addClass("fa-check");
        } else if(data[i][1] == "down"){
            $("#" + data[i][0] + "-appcheck").removeClass("btn-default");
            $("#" + data[i][0] + "-appcheck").addClass("btn-danger");
            $("#" + data[i][0] + "-appcheck-icon").removeClass("fa-exclamation-circle");
            $("#" + data[i][0] + "-appcheck-icon").addClass("fa-close");
        }
    }
}

function tableMaker(data, tableID) {

    /* vars used below as the skeleton of the injected buttons*/

    var i = 0, j = 0, colLimit = 12;
    for(; i < data.length;){
        for (var j = 0; j < colLimit && i < data.length; ++j, ++i) {
            mytable +=  colStart + data[i][2] + titleEnd + '\n' + buttonStart + data[i][2] + buttonMiddle1 +
                    data[i][2] + buttonMiddle2 + data[i][2] + buttonMiddle3 + '><i id="' + data[i][2] +
                    buttonEnd + colEnd;
        }
    }

    panel += mytable + panelEnd;

    document.getElementById(tableID).innerHTML = panel;
}

function stackUpdater(data){
    for(var i = 0; i < data.length; ++i){
        var curStack = data[i][0];
        for(var j = 1; j < data[i].length; j++) {
            if(data[i][j] == null) {
                break;
            } else {
                $("#" + curStack + j).removeClass("progress-bar-info");
                if(data[i][j] == "up") {
                    $("#" + curStack + j).addClass("progress-bar-success");
                } else {
                    $("#" + curStack + j).addClass("progress-bar-danger");
                }
            }
        }
    }
}

我理解浏览器缓存javascript函数的结果，但第三个函数是在每次刷新时运行的，那么为什么前两个函数不会？因此，为什么第二个函数的结果只会在刷新后出现？

在第一次加载此页面时，需要更改哪些内容以确保按钮正确修改？

更新1

在函数调用之间插入警报后，渲染在第一次尝试时起作用，那么确保同步的正确方法是什么？

Index.html的底部：

    $(document).ready(function(){
        $.get("/buttoninfo", function(data, status) {
            tableMaker(data, "AppStatusTable");
        });

        alert("Button table made!");

        $.get("/appstatus", function(data, status) {
            appStatus(data);
        });

        alert("Button Data Updated!");

        $.get("/stackstatus", function(data, status) {
            stackUpdater(data);
        });

        alert("Stack Data Updated!");

    });
</script>

Answer 1

而不是使用$ .get尝试使用$ .ajax并将缓存设置为false。如果绝对需要$ .get，请尝试为每个请求添加时间戳。您可以参考How to set cache: false in jQuery.get call。

希望有所帮助。

JavaScript HTML渲染不同步 - Spring MVC Project

1 个答案: