Question

在我解释问题之前，我想描述一下我想要实现的目标

我制作了5个图表和一个NavigationList。 NavigationList由纯HTML组成，显示table1，table2，table3，table4和table5（JavaScript文件）的列表。用户将单击列表中的特定行，然后将显示用户想要查看的表，并且他一次只能查看一个图表。

例如：我用户想要查看diagram1，然后他必须点击diagram1。后来他想查看diagram2，然后diagram1将被关闭，因为他点击了diagram2。

问题： 如果用户在同一个列表名称上多次单击（例如diagram1），那么每次单击都会使图表变慢，非常奇怪。因此，如果用户点击10次，图表将减慢10倍。为什么会发生这种情况？如何解决这个问题？**

这是 table2.js ，我相信$(document).ready(function()与每次点击后图表放缓的原因有关。

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

这是我通过使用if语句使用JQuery事件来调用图表的部分。

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

         if(row == 1){
            $.getScript("table1.js", function(){}); 
            table1();
         } else if (row == 2) {
            $.getScript("table2.js", function(){}); 
            table2();
         } else if (row == 3) {
            $.getScript("table3.js", function(){}); 
            table3();  
         } else if (row == 4) {
            $.getScript("table4.js", function(){}); 
            table4();  
         }else if (row == 5) {
            $.getScript("table5.js", function(){}); 
            table5();  
         } else {

         }
    });

这是一个统计结果，显示了为什么表现如此缓慢，如您所见;每个表都在接收数据样本。多次点击后性能很高，从40 fps下降到6.5 fps，奇怪？ Click here to view the slow performance statistics

Answer 1

因为每次点击你都在做ajax请求，所以如果你点击10次你发出10个请求再加上调用table12（）;可能很重的函数..你需要更改代码以检查图表是否可见如果是，则不执行其他请求

Answer 2

你可能有内存泄漏。确保正确清理全局变量和正确清理DOM节点。您的浏览器应该有开发人员工具，可以让您查看内存使用情况。

我也有点担心这段代码：

$.getScript("SensorTables/ExhaustTemperature.js", function(){}); 
table1();

.getScript()是一个异步函数，因此在浏览器加载脚本之前将执行

。

正确的代码可能是：

table1()

因为函数$.getScript("table1.js", function(){});的定义方式是它立即执行。这意味着当您第一次单击时，您的代码会在JavaScript控制台中记录错误。当您再次单击时，该函数被调用两次（一次是jQuery从服务器获取脚本并再次从您的代码中获取）。
table1内部不需要
$(document).ready(); - 执行此代码时，DOM已准备就绪。也许代码在那里，因为其他页面也使用该脚本。我的建议是将其移到您需要的地方。

最后，如果你给这个函数命名，那么浏览器会保留它。这可能会占用大量内存，具体取决于代码的复杂程度。如果你想保持代码，这应该快得多：

(function table1(){}());

因为它只加载一次脚本。

如果您想在每次用户点击并保存内存时再次加载脚本：

if(table1) { table1(); } else { $.getScript("table1.js"); }

并将脚本更改为

$.getScript("table1.js");

（即删除函数的名称）。然后，浏览器将执行一次并尽可能多地忘记它。

多次点击会降低应用程序性能

2 个答案: