JavaScript：畫布上的內存泄漏（不適用於Chrome）

Question

我正在嘗試使用jCanvas插件和jQuery在畫布上繪制一些漸變線，但是我的代碼導致Firefox中的內存泄漏（保留的RAM增加到無窮大）。 Internet Explorer可以很好地處理RAM使用情況，但整個過程的運行速度非常慢。 只有Google Chrome瀏覽器可以無延遲地顯示我的畫布。 你能告訴我我在做什么錯嗎？

部分代碼：

• 聲明：

   var i, i1, i2, p; var r=[], g=[], b=[], a=[]; var gradient=[]; var w=$("body").width(); var w2=Math.floor(w/2), w3=w2-1; var h=$("body").height(); 

• 畫畫：

   function draw() { $('#bg').clearCanvas(); for (i=0; i<w2; i++) { $('#bg').drawLine({ strokeStyle: gradient[i], strokeWidth: 2, x1: i*2, y1: 0, x2: i*2, y2: 700, }); } } 

• 重新計算線條顏色的值

   function mixer() { for (i=0; i<w2; i++) { p = Math.random(); if (p<0.997) { i1 = (i>1)?i-1:w3; i2 = (i<w3)?i+1:0; r[i] = Math.floor(( r[i1] + r[i2] ) / 2); g[i] = Math.floor(( g[i1] + g[i2] ) / 2); b[i] = Math.floor(( b[i1] + b[i2] ) / 2); } else { r[i] = Math.floor(Math.random()*180); g[i] = Math.floor(Math.random()*180); b[i] = Math.floor(Math.random()*180); } delete gradient[i]; gradient[i] = $("#bg").createGradient({ x1: 0, y1: 0, x2: 1, y2: 699, c1: '#000', c2: "rgb("+r[i]+","+g[i]+","+b[i]+")", c3: '#000' }); } draw(); } window.setInterval(mixer, 60); 

Answer 1

測試是否更好：

function mixer() {
    for (i = 0; i < w2; i++) {
        p = Math.random();
        if (p < 0.997) {
            i1 = (i > 1) ? i - 1 : w3;
            i2 = (i < w3) ? i + 1 : 0;
            r[i] = Math.floor((r[i1] + r[i2]) / 2);
            g[i] = Math.floor((g[i1] + g[i2]) / 2);
            b[i] = Math.floor((b[i1] + b[i2]) / 2);
        } else {
            r[i] = Math.floor(Math.random() * 180);
            g[i] = Math.floor(Math.random() * 180);
            b[i] = Math.floor(Math.random() * 180);
        }
        delete gradient[i];
        gradient[i] = $("#bg").createGradient({
            x1: 0,
            y1: 0,
            x2: 1,
            y2: 699,
            c1: '#000',
            c2: "rgb(" + r[i] + "," + g[i] + "," + b[i] + ")",
            c3: '#000'
        });
    }
    draw();
    setTimeout(mixer, 60);
}
mixer();