3

我正在使用Humble Finance一次绘制一系列数据以实现延时效果。我的代码如下，但我想先解释一下：

如果您不熟悉 HF，它的初始化函数需要三个 JavaScript 数组（priceData、volumeData 和 summaryData），然后将它们绘制到三个图形上。这些数组中的每一个都包含几个 XY 对数组。

在我的程序中，我声明了三个空的“图形”数组（priceData、volumeData 和 summaryData），然后从数据库中获取值并将它们放入名为 priceDataOrig、volumeDataOrig 和 summaryDataOrig 的数组的“主”JavaScript 数组中。我没有将这些数组传递给 HF 并一次绘制所有数据，而是调用了一个函数 UpdateGraph()，它每 40 毫秒调用一次自身。UpdateGraph() 一次将一个值（实际上是一个包含 XY 对的数组）从主数组推送到其对应的图形数组中，然后调用 HF 初始化函数（将图形数组传递给它），绘制三个图形。在图形数组中有 50 个点之后，我开始在推送新点之前移出最旧的点，这样每个图形一次绘制的点不超过 50 个。

另外，我使用 jQuery 的 load() 来加载图形，所以每当用户单击“Go”按钮时，graph.php（处理上述所有内容）都会加载到页面上的 div 中并开始逐点绘制图形. 这个想法是用户应该能够在他们想要重新加载图表并再次观看时间流逝时单击 Go。

所以现在我的问题是：在我的测试程序中，我总共绘制了大约 500 个值，所以这无论如何都不是一个大数据集。第一次单击 Go 时，所有值都被绘制得很好。但是，浏览器的内存使用量猛增（我在 Firefox 和 Chrome 中都尝试过），当用户再次单击 Go 时，浏览器在绘图过程中完全崩溃。我完全不知道为什么会发生这种情况——我已经尝试在绘图完成后将所有数组归零，等等。

有没有人有任何想法？这是我的 graph.php 代码，为清楚起见稍作修改：

<?php
    #Queries the DB and constructs the data strings assigned to JavaScript arrays below,
    #An example might be: $priceData = '[[0,100.34],[1,108.31],[2,109.40],[3,104.87]]';
?>

<script>
//Global variables used in UpdateGraph():

//The "master" arrays -- I'm just using the same data for all of
//them for now (an array containing around 500 arrays of XY pairs)
var priceDataOrig = <?php echo $priceData; ?>;
var volumeDataOrig = <?php echo $priceData; ?>;
var summaryDataOrig = <?php echo $priceData; ?>;

var priceData = [],
    volumeData = [],
    jsonData = [];
    i = 0,
    pointsToShowAtOnce = 50,
    totalPoints = priceDataOrig.length,
    updateRate = 40;    //milliseconds

UpdateGraph();

//Periodically updates the graph to show time lapse, adding one new point at a time
function UpdateGraph() {
    //Only add a new point if all the points haven't already been added
    if (i != totalPoints) {
        //Add a new point to each array
        priceData.push(priceDataOrig[i]);
        volumeData.push(volumeDataOrig[i]);
        summaryData.push(jsonDataOrig[i]);

        if (i >= pointsToShowAtOnce) {
            //We're showing the amount of points we want to show, so remove the oldest point
            priceData.shift();
            volumeData.shift();
            jsonData.shift();

            //Sets the new X values for these points -- not really pertinent to
            //my question, it works the same if this block is commented out.
            var pLen = priceData.length;
            var j, c = 0;
            for (j = 0; j < pLen; j++) {
                priceData[j][0] = c;
                volumeData[j][0] = c;
                c++;
            }
        }

        //Load the graph itself. 'humblefinance' is just a div on the page.
        HumbleFinance.init('humblefinance', priceData, volumeData, summaryData);

        i++;

        //This function calls itself at the interval in
        //updateRate until all the points have been drawn
        setTimeout('UpdateGraph()', updateRate);
    } else {
        //I null these out here even though it doesn't seem necessary.
        //It doesn't help though.
        priceDataOrig = null;
        volumeDataOrig = null;
        summaryData = null;
        jsonDataOrig = null;
        priceData = null;
        volumeData = null;
        jsonData = null;
    }
}
</script>

<div id="humblefinance"></div>
4

2 回答 2

2

尝试对 HumbleFinance 进行细微更改。在 init 方法中，这些函数被调用：

this.buildDOM();
this.attachEventObservers();

这些似乎是一次性配置函数，您只想在第一次更新图表时运行它们。似乎创建了很多元素并绑定了事件，这会一次又一次地完成，每次都会消耗更多的内存，因为它们永远不会被释放。

最简单的方法是添加一个参数，init以便您可以有条件地排除此部分，或者将实际绘制图形的代码分离为单独的方法。最后，我认为您只希望那些设置程序调用一次。

于 2011-06-22T21:47:26.023 回答
1

2个想法。

1 - 调试器有时会导致内存泄漏。关闭firebug / devtools会发生这种情况吗？

2 - 快速浏览一下 HumbleFinance.js 的代码，看起来图表已附加到容器中，而不是替换那里的内容。在调用 init 之前，这样的事情可能会有所帮助：

$('#humbledata')[0].innerHTML = ''

或者无论如何 jQuery 喜欢你做这些事情。

于 2011-06-22T21:27:16.423 回答