处理数组时可能JavaScript内存泄漏？

我正在使用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()来加载图形,因此,每当用户单击“执行”按钮时,graph.php(处理上述所有问题)就会加载到页面上的div中,并开始逐点绘制图形.这个想法是,用户只要想重新加载图形并再次观看时间流逝,就应该能够单击“转到”.

现在是我的问题了：在我的测试程序中,我总共绘制了约500个值,因此无论如何这都不是一个大数据集.第一次单击“执行”时,所有值均绘制良好.但是,浏览器的内存使用量激增(我在Firefox和Chrome中都尝试过),并且当用户再次单击“执行”时,浏览器在绘图过程中完全崩溃.我完全不知道为什么发生这种情况-我已经尝试在绘制完成后对所有数组进行null运算,等等.

有人有什么想法吗？这是我的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>

解决方法:

尝试对HumbleFinance进行较小的更改.在init方法中,这些函数称为：

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

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

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

标签：google-finance,memory-leaks,arrays,javascript
来源： https://codeday.me/bug/20191208/2090073.html