你如何在JavaScript中运行两个不同的功能 [英] How do you run two different functions in javascript
问题描述
我有两个不同的javascript函数，如下所示。当我调用这些函数时，直到函数完成执行，我正在显示加载图像。我遇到的问题是，当第一个函数完成时，它应该加载图表，第二个函数运行并加载图表。
I have two different javascript functions as below. When I call these functions, until the function completes executing, I am showing loading image. The problem I am having is that when first function completes, it should load the chart and the second function runs and load the chart.
这不是发生了什么。两个图表都在两个函数完成时加载。我需要每个函数来运行和加载图表，当每个函数完成时不能同时进行。
That's not what's happening. Both charts load when both function completes. I need each function to run and load the chart when each complete not both at the same time.
以下是函数：
Here is the functions:
<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>
这是我给他们打电话的地方：
This is where I am calling them:
<!-- Placed at the end of the document so the pages load faster -->
<script>
$('a[href*="vmware"]').on('click', function () {
vcenter1();
vcenter2();
});
这里有什么想法吗？我需要显示加载图像为什么函数正在运行，完成时，我需要显示数据并继续到第二个函数等等。现在，发生的是第一个函数运行，完成，加载图像消失，但没有数据/图表显示。第二个函数运行完成，然后这两个div都充满了数据/图表。
Any ideas that I am missing here? I need to show loading image why the function is running, when it's completes, I need to show the data and move on to the second function and so forth. Now, what's happening is that first function runs, completes, loading image goes away but no data/chart shows up. Second function runs, completes then both divs are full with data/charts.
推荐答案
查看JavaScript回调或更多功能， jQuery延期 - 一个很好的教程是在 http：// joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/ 。
Look at JavaScript callbacks, or for more functionality, jQuery Deferred - a good tutorial is at http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/.
这篇关于你如何在JavaScript中运行两个不同的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
