【发布时间】：2016-12-08 04:11:22
【问题描述】：
我正在开发一个仪表板站点，它使用 SpringMVC、FusionCharts 和 Bootstrap（提供架构概述）。当我新启动 Tomcat 服务器时，第一次为我提供索引页面时，按钮面板将无法正确呈现。我得到了正确数量的带有问号的白色圆圈，如 3 个 javascript 函数中的第一个。如果我刷新页面，预期的红色和绿色结果会立即出现，由第二个脚本函数生成。
作为序言，带有按钮的面板是正确生成的，具有正确的计数、正确的名称、正确的 HREF 和其他所有内容。在页面刷新之前颜色不会改变。回到这个项目最初构建的时候，数据是通过 http 请求服务器端收集的。它与现在发生的情况相当慢：从文件服务器端加载数据并以相同的格式发送。旧方法总是在等待 10 秒后生成正确的颜色和图标。现在，按钮保持空白，直到我刷新页面，然后我得到正确的结果。
我相信这只是两个 Javascript 函数相互踩踏的结果，尽管我知道 JavaScript 是单线程的。如果没有，我会很困惑和迷路。
索引.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>
【问题讨论】：
-
你不妨去掉这个问题。你已经完成了大量的代码转储。
-
我不会在 70 行以下称其为庞大的，而且它的格式良好且易于阅读。一些 C++ 问题是 300 行垃圾，看在眼里。此外，说真的，没有想法？
-
代码转储更多的是关于您分配与您的问题无关的东西。在您提出问题之前，您需要花时间将所有代码精简为最少量的代码，以证明您的问题。这和 Spring 有什么关系？
-
这是最小的。我发布的只是在 html 页面上调用 JavaScript 的位置、正在使用的其他 javascript 库以及使用的顺序，以及我的 javascript 代码是什么。那是最小的。我不知道 Spring MVC 是否是问题的一部分，这就是我问它是否可能的部分原因。
-
那里，修剪得够你吃士力架了吗？
标签： javascript java jquery html spring