在单页应用程序中使用 RGraph.Line 进行内存泄漏

如何解决在单页应用程序中使用 RGraph.Line 进行内存泄漏

我实际上使用 rgraph.line 在 Web 应用程序的页面之一中显示曲线。到目前为止，一切都很好。页面之间的切换基于文字模板。问题出现在页面离开时，rgraph.line 保留在 Heap 中。我尝试将行项目设置为 null，但 GC 没有收集它。对于绘制容器，我使用的是 OOP 结构。有人可以告诉我如何释放 rgraph.line 吗？提前致谢

这里是脚本文件：

// data Set
let myData = [5,10,9,8,152,56,1,4,25,10]

let template_p1 = `<div id='curve'>
                    <canvas id="Curvecsv">[No canvas support]</canvas>
                   </div>`;

let template_p2 = `<div> this is a test page </div>`;

// variables
let selection = 1; //<-- page tracker
let drawable = null; // <-- oop object for drawing
let p1_loaded = false; // <-- load trackers
let p2_loaded =false;

//events
const installEvents = () =>
document.querySelectorAll('.item').forEach( link => 
    link.addEventListener('click',() => {
             selection = Number(link.getAttribute('id'));
        })
    )

//OOP container
class DrawableItem {
    constructor(name,id){
        let _name = null;
        this.set_name = name => _name = name;
        this.name = () => _name;

        let _id = null;
        this.set_id = id => _id = id;
        this.id = () => _id;

        let _line = null;
        this.draw = inputData => {
            rgraph.reset(document.getElementById(`Curvecsv`));
            if(!_line) {
                _line = new rgraph.Line({
                        id : `Curvecsv`,data: [],options: {
                            titleColor: 'green',backgroundGridBorder: true,shadow: false,yaxisTickmarks: false,yaxisTickmarksCount: null,yaxisScale: false,colors: ['#000']
                        }
                    });
                //fit the graph to parent div
                _line.canvas.style.width='100%';
                _line.canvas.style.height='100%';
                _line.canvas.width  = _line.canvas.offsetWidth ; 
                _line.canvas.height = _line.canvas.offsetHeight ;
            }

            _line.original_data[0] = inputData;
            _line.set('title','this is a test curve');
            _line.draw();

        }
        this.reset = () => _line = null;

        this.set_name(name);
        this.set_id(id);
    }
}


//Subroutines
const  sleep = ms => {
    let unixtime_ms = new Date().getTime();
    while(new Date().getTime() < unixtime_ms + ms) {}
}

const loadPage = () => {
    console.log(selection);
    if(selection === 2) {
        if(!p2_loaded) {
            drawable.reset();
            document.querySelector('.content').innerHTML = template_p2;
            p2_loaded = true; p1_loaded = false;
        }

    } else if(selection === 1){
        if(!p1_loaded) {
            document.querySelector('.content').innerHTML = template_p1;
            p2_loaded = false; p1_loaded = true;
        }
    }
    sleep(50);
    setTimeout(draw,500);
}

const draw = () => {
    if(selection === 1) {
        if(p1_loaded) {
            drawable.draw(myData);
        }
    }
    sleep(50);
    setTimeout(loadPage,500);
}

//Setup
const setup = () => {
    installEvents();

    drawable = new DrawableItem('test',1);
    loadPage();
}

//execution
setup();

和 html 代码：

<!-- index.html -->
<!-- ----------------------------------------------------------------- -->
<html><body>
    <header><nav><ul>  
        <li class="item" id ="1"><a class= "link"  href="#"> page 1 </a></li>
        <li class="item" id ="2"><a class= "link"  href="#"> page 2 </a></li>
    </ul></nav></header>
    <main>
        <div class="content" display="block"></div>
    </main>
</body>
    <script type="text/javascript" src="rgraph.common.core.js"></script>
    <script type="text/javascript" src="rgraph.line.js"></script>
    <script type="text/javascript" src="script.js"></script>
</html>
<!-- ----------------------------------------------------------------- -->
<!-- end of index.html -->
<!-- ----------------------------------------------------------------- -->

在单页应用程序中使用 RGraph.Line 进行内存泄漏

如何解决在单页应用程序中使用 RGraph.Line 进行内存泄漏

相关推荐