【发布时间】：2014-08-27 14:36:39
【问题描述】：
我有两个不同的 javascript 函数，如下所示。当我调用这些函数时，直到函数完成执行，我正在显示加载图像。我遇到的问题是，当第一个函数完成时，它应该加载图表，第二个函数运行并加载图表。
这不是正在发生的事情。当两个功能完成时，两个图表都会加载。我需要每个函数在每个函数完成时运行并加载图表，而不是同时完成。
这里是函数：
<script>
function vcenter1(){
$('#loading').html('<img src="img/loading.gif"> loading...');
var req = ocpu.rpc("cpu", {
}, function(output){
var data=output;
data=JSON.parse(data);
$('#output').highcharts('StockChart', {
chart: {
borderColor: '#98AFC7',
borderRadius: 20,
borderWidth: 1,
renderTo: 'output',
type: 'line',
marginRight: 30,
zoomType: 'x',
resetZoomButton: {
position: {
x: -50,
y: -40
}
}
},
plotOptions: {
line: {
marker: {
radius: 2,
lineColor: '#666666',
lineWidth: 2
}
}
},
exporting: {
enabled: true
},
legend: {
enabled:true,
layout: 'horizontal',
maxHeight: 55 // max. 2 lines with navigation
},
rangeSelector: {
allButtonsEnabled: true,
inputEnabled: $('#output').width() > 480,
selected: 2
},
scrollbar: {
enabled: false
},
navigator : {
enabled : false
},
xAxis: {
type:'datetime',
gridLineColor: '#EEEEEE',
gridLineWidth: 1
},
yAxis: { // Primary yAxis
min:0,
max:100,
labels: {
style: {
color: "black",
fontWeight: 'bold'
}
},
title: {
text: '% CPU Utilization',
style: {
color: 'black',
fontWeight: 'bold'
}
}
},
credits: {
enabled: false
},
title: {
text: "% CPU UTILIZATION",
style: {
color: '#333000',
fontSize: '18px',
fontWeight: 'bold'
}
},
tooltip: {
useHTML:true,
positioner: function (boxWidth, boxHeight, point) {
return { x: this.chart.plotLeft, y: this.chart.plotTop - 5 };
},
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} <b>',
valueDecimals: 0
},
series: data
});
});
//if R returns an error, alert the error message
req.fail(function(){
alert("Server error: " + req.responseText);
$('#loading').html('');
});
//after request complete, re-enable the button
req.always(function(){
$('#loading').html('');
});
}
//VCENTER2
function vcenter2(){
$('#loading1').html('<img src="img/loading.gif"> loading...');
var req = ocpu.rpc("memory", {
}, function(output1){
var data1=output1;
data1=JSON.parse(data1);
console.log("Ready to paint 2:");
$('#output1').highcharts('StockChart', {
chart: {
borderColor: '#98AFC7',
borderRadius: 20,
borderWidth: 1,
type: 'line',
marginRight: 20,
zoomType: 'x',
resetZoomButton: {
position: {
x: -50,
y: -40
}
}
},
plotOptions: {
line: {
marker: {
radius: 2,
lineColor: '#666666',
lineWidth: 2
}
}
},
exporting: {
enabled: true
},
legend: {
enabled:true,
layout: 'horizontal',
maxHeight: 55 // max. 2 lines with navigation
},
rangeSelector: {
allButtonsEnabled: true,
inputEnabled: $('#output1').width() > 480,
selected: 2
},
scrollbar: {
enabled: false
},
navigator : {
enabled : false
},
xAxis: {
type:'datetime',
gridLineColor: '#EEEEEE',
gridLineWidth: 1
},
yAxis: { // Primary yAxis
min:0,
max:100,
labels: {
style: {
color: 'black',
fontWeight: 'bold'
}
},
title: {
text: '% Memory Utilization',
style: {
color: 'black',
fontWeight: 'bold'
}
},
opposite: true
},
credits: {
enabled: false
},
title: {
text: "% MEMORY UTILIZATION",
style: {
color: '#333000',
fontSize: '18px',
fontWeight: 'bold'
}
},
tooltip: {
useHTML:true,
positioner: function (boxWidth, boxHeight, point) {
return { x: this.chart.plotLeft, y: this.chart.plotTop - 5 };
},
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} <b>',
valueDecimals: 0
},
series: data1
});
});
//if R returns an error, alert the error message
req.fail(function(){
alert("Server error: " + req.responseText);
$('#loading1').html('');
});
//after request complete, re-enable the button
req.always(function(){
$('#loading1').html('');
});
}
</script>
这是我给他们打电话的地方：
<!-- Placed at the end of the document so the pages load faster -->
<script>
$('a[href*="vmware"]').on('click', function () {
vcenter1();
vcenter2();
});
我在这里遗漏的任何想法？我需要显示加载图像为什么函数正在运行，当它完成时，我需要显示数据并继续执行第二个函数等等。现在，发生的事情是第一个函数运行、完成、加载图像消失但没有显示数据/图表。第二个函数运行，完成，然后两个 div 都充满了数据/图表。
【问题讨论】：
-
这是一堵代码墙，格式不正确。在发布到 SO 之前，请花一些精力格式化您的代码并找到问题部分。
标签： javascript highcharts highstock