Question

我无法理解为什么这两个javascript函数在加载JSP文件时会自动执行。首先执行procChart函数，然后执行drawChart。我了解在加载Google Visualization API时会调用drawChart。令人感兴趣的是如何首先调用procChart，然后在下一个脚本中自动执行。谁能解释一下？

代码 -

<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"
    src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">   
    function procChart(){

        <% System.out.println("Inside procChart"); %>

        var ExpList = new Array();
        ExpList = request.getParameterValues("chkExps");
        ExpList.push(request.getParameter("expId"));

        <jsp:useBean id="compare"
            class="org.server.experiment.CompareResults" />

            <%int[][] data4= compare.getResult(request.getParameter("expId"), request.getParameterValues("chkExps")  ,request.getParameter("field")); %>;
            <% System.out.println(data4); %>
    }
</script>

<script type="text/javascript">

    google.load('visualization', '1', {
        'packages' : [ 'corechart' ]
    });

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {

        var te= new Array();

         <% for (int i=0; i<data4.length; i++) { %>
            var xe = [];
         <% for (int j=0; j<data4[i].length; j++) { %>
            xe[<%= j %>] = <%= data4[i][j] %>;

         <% } %>
            te.push(xe);
         <% } %>

        var data = new google.visualization.DataTable();
        var len = te[0].length;
        data.addColumn('string', 'Experiment');

        for(var k=0; k < te.length; k++){
            data.addColumn('number', 'Exp'+(k+1));
        }
        data.addRows(len);
        for (var i = 0; i < len; i++) {

            data.setCell(i, 0, ""+(i+1));
            for (var j = 0; j < te.length; j++) {


                data.setCell(i, j+1, te[j][i]);
            }
        }

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.LineChart(document
                .getElementById('chart_div'));
        chart.draw(data, {
            width : 900,
            height : 500
        });
    }
</script>

</head>

<body>
    <!--Div that will hold the Line chart-->
    <div id="chart_div"></div>
</body>
</html>

注意 - 代码完全正常，我得到了所需的图表。我很好奇它是如何工作的。

Answer 1

drawChart由于以下行而被执行

google.setOnLoadCallback(drawChart);

Javascript函数自动执行？

1 个答案: