Question

我遇到的问题是，如果我将相同的图表调用20次，它会使图表减慢20次，非常奇怪......？因此，对于每次单击，图表的速度会更慢，但在第二次单击之前，图表的工作速度非常快。我创建了一个图表，只显示一些随机生成的值，并在x和y坐标图中显示（动态）。

我在下面的JavaScript和JQuery代码中有什么问题吗？我希望用户也只能查看一个图表，而不会通过点击相同的图表来降低性能？

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

             if(row == 1){
                $.getScript("diagram1.js", table1()); 

             } else if (row == 2) {
                $.getScript("diagram2.js", function(){}); 
                table2();
             } else if (row == 3) {
                $.getScript("diagram3.js", function(){}); 
                table3();  

        });

以下是用户导航以分别查看图表的列表：

<div>
   <ul class="list-group">
   <!--Set this inside a div to individuelly choose-->
   <div id='list_row1' data-row="1"><li class="list-group-item">table1</li></div>
   <div id='list_row2' data-row="2"><li class="list-group-item">table2</li></div>
   <div id='list_row3' data-row="3"><li class="list-group-item">table3</li></div>
   <div id='list_row4' data-row="4"><li class="list-group-item">table4</li></div> 
</div>

每个图都围绕着这个结构：

(function table1(){          
  $(document).ready(function() {
      // table1 code content is taken away to save space in this file on stackoverflow... 
  });
}());

Answer 1

减速可能发生在您多次加载的外部脚本中。您应该只在函数中包含这些脚本的内容并调用函数，而不是使用getScript()。

JQuery多次调用会降低性能

1 个答案: