Question

我有两个不同的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都满了数据/图表。

Answer 1

查看JavaScript回调，或者更多功能，jQuery Deferred - 一个很好的教程是http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/。

Answer 2

我不认为你理解异步调用是如何工作的。根据您的功能，工作流程将如何：

vcenter1
rpc
async ajax call to R
vcenter2
rpc 
async ajax call to R

稍后，vcenter1的ajax调用完成，然后 - ＆gt;

always callback - which removes loading
complete callback
parse JSON
render chart

稍后，vcenter2的ajax调用完成，然后 - ＆gt;

always callback - which removes loading
complete callback
parse JSON
render chart

如果确实希望它在vcenter1之后运行vcenter2，那么对vcenter2的调用需要在vcenter1的rpc的完整回调中。

你如何在JavaScript中运行两个不同的功能

2 个答案: