Question

我目前正在开发一个jQuery移动应用程序。在一个页面上有一个创建的图表（highcharts）然后可以导出（canvg和canvas2ImagePlugin）。但是，我注意到图表对象保留在内存中。这样做的结果是，如果页面被多次打开并且然后按下导出按钮，则将导出所有先前生成的图形。

看一下Chrome Dev Tool的堆快照，我注意到所有对象都留在了内存中。为了证明这一点，我在jsfiddle上创建了一个非常基本的应用程序，保留了所有的高图和canvg代码：http://jsfiddle.net/dreischer/Lt4Xw/ - ＆gt;只需单击按钮即可转到第二页。如果单击导出按钮，将打开一个弹出窗口。但是，如果您返回第一页然后再返回第二页并再次单击该按钮，则会打开两个弹出窗口（您可能需要允许弹出窗口）。

我也试过在pagebeforehide上设置analyseGraph null或undefined或者使用.remove（），但它没有帮助。

感谢您的帮助！

以下是此示例的代码：
的 HTML：

 <div data-role="page" id="p1"> 
        <div  data-role="header"><h1>Header Page 1</h1></div> 
        <div  data-role="content">
            <p>Page 1</p>
            <a href="#p2" data-role="button">Go To Page 2</a>
        </div> 
    </div> 

    <div data-role="page" id="p2">
        <div  data-role="header" data-rel="back"><h1>Header Page 2</h1></div>
        <div  data-role="content">
            <p>Page 2</p>
            <a href="#p1" data-role="button">Go To Page 1</a>
            <a id="export_graph" data-role="button" style="max-width: 300px;" data-mini="true">Export</a>
        </div>    
    </div>

的Javascript ：

$(document).on('pagebeforeshow', '#p2', function (){

    var Graph = function (){
        this.drawGraph = function(){};
        this.exportCanvas = function(){
            window.open();
        };        
    }

    var analyseGraph = new Graph();
    analyseGraph.drawGraph();
     $(document).on('click', '#export_graph', function(){ 
        analyseGraph.exportCanvas();
    });

});

Answer 1

每次显示第2页时，都会将click事件绑定到document。所以我认为你必须偶尔使用'off'，比如this

$(document).on('click', '#export_graph', function(){ 
    analyseGraph.exportCanvas();
    $(document).off('click');
});

jQuery Mobile对象留在内存中

1 个答案: