Question

我遇到的问题是我的应用程序运行缓慢，因为我已经设置了JQuery代码。

我有5个不同的图表，我希望用户看到一次，而其余图表应该是空闲的。

我写下了一个JQuery代码，负责通过听取用户点击来显示或隐藏图表。

是否可以更改JQuery方法＆＃34; window onLoad＆＃34;只有当它被JQuery事件代码加载时才会运行内容？

这是我的index.html，你可以看到我在这里包含了5个图表。

$('#Div2').css("line-height", ($('#Div1').height()));

下面是带有JQuery代码的ListOfTableSensors.html。从上面的代码中可以看出，此文件包含在index.html中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"><!-- NEW -->     
    <script src="js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="canvasjs-1.6.2/canvasjs.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/style.css">


    <!--Import temperaturetest.js-->
    <script src="diagram1.js"></script>
    <script src="diagram2.js"></script>
    <script src="diagram3.js"></script>
    <script src="diagram4.js"></script>
    <script src="diagram5.js"></script>

    <script> 
        $(function(){
        $("#toolbar").load("TopNavigationBar.html"); // Top navigation menu
        $("#selectTable").load("ListOfTableSensors.html"); // User select which table he/she wants to see once.  
        }); 
    </script> 

</head>
<body>

      <div id="toolbar"></div>
      <div id="diagram1"  class="table"></div>
      <div id="diagram2"  class="table"></div>
      <div id="diagram3"  class="table"></div>
      <div id="diagram4"  class="table"></div>
      <div id="diagram5"  class="table"></div>             
      <div id="selectTable"></div>
</body>
</html>

Answer 1

您可以定义一个函数，并仅在JQuery事件被触发时调用它。

$('[data-row]').on('click', function() {
    drawCharts();
    var row = $(this).attr('data-row');
    $('.active').removeClass('active');
    $('#table' + row).addClass('active');

}）;

您可能希望改进代码，可能会添加一个状态，该状态定义是否已经绘制了图表。

Answer 2

将窗口加载功能中的所有内容包装在其自身的功能中。从click事件函数中调用该新函数。

Answer 3

您可以在数据行单击方法中移动图表初始化，如下所示：

var text = '{...}';

确保只创建一次图表，因此请务必检查图表变量是否为空

Answer 4

你的意思是这样吗？

$(window).on("load", function() {

    $('[data-row]').on('click', function() {
        var chart = new CanvasJS.Chart("diagram4",
        { 
        // Code.. 
        })
        .on("rendercomplete", function() {
            var row = $(this).attr('data-row');
            $('.active').removeClass('active');
            $('#table' + row).addClass('active');
            });
        }); 
    });

rendercomplete只是一个例子（我不知道哪些事件可用）。您应该使用在图表渲染完成后触发的事件。

<强>更新

或者您可以在加载时保留图表定义，但在点击时渲染它（确保它在加载时不会呈现）：

$('[data-row]').on('click', function() {
     chart.render();
     var row = $(this).attr('data-row');
     $('.active').removeClass('active');
     $('#table' + row).addClass('active');
});

只有在调用时才运行方法

4 个答案: