2014-04-08 105 views
0

我無法理解爲什麼這兩個javascript函數在加載JSP文件時自動執行。 procChart函數首先執行,然後執行drawChart。我明白,在加載Google Visualization API時會調用drawChart。有趣的是,如何首先調用procChart,然後再自動執行下一個腳本。誰能解釋一下?Javascript函數自動執行?

碼 -

<%@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> 

注 - 代碼工作完全正常,我也得到所需的圖表。我只是好奇它是如何工作的。

+0

因爲'drawChart'是一個'OnLoad'事件處理程序,它的執行被延遲,給予'procChart'時間要調用的執行。我看不到'procChart'在哪裏被調用。 –

+0

@cookiemonster - 這是我的觀點,我沒有明確地調用procChart,但它仍然被自動調用並執行。我無法理解這種行爲。 – sid

+0

如果你不調用'procChart()'而不使用它,那麼只需從代碼中完全刪除它,你就會看到誰會投訴。 –

回答

0

drawChart獲取因爲以下行

google.setOnLoadCallback(drawChart); 
+0

我知道,我在問題描述中提到過。我想知道爲什麼procChart先被調用,然後再執行下一個腳本。 – sid

+0

您是否檢查了包含的js?我對你正在使用的庫不熟悉,但似乎是從你包含的JavaScript文件中調用該函數。 – nth

+0

這些是Ajax和jQuery實現所需的標準庫。我不認爲這些標準庫會自動調用用戶定義的函數。 – sid