jsPlumb 提高执行速度答案

【问题标题】：jsPlumb incrase speed executionjsPlumb 提高执行速度
【发布时间】：2013-03-31 10:47:09
【问题描述】：

我正在使用 jsPlumb 库来绘制（连接）一些 div。 div 的数量是动态的，最多可以达到 2000 个 div。我正在使用以下递归方法来画线：

connectGraphNodes: function(jsp_o, children, level){
    var nr_of_children, i=0;

    nr_of_children = children.length;
    for(i=0; i<nr_of_children; i++){
        if(!this.isPropertyEmpty(children[i]['id']) && !this.isPropertyEmpty(children[i]['name'])){
            // Connect child node with node
            jsp_o.connect({ 
                source: 'es-org-graph-box-' + children[i]['parent'], 
                target: 'es-org-graph-box-' + children[i]['id'],
               overlays:[
                    [ "Label", {
                            label: children[i]['percentage']+'%', id:"label",
                            location: 1                                
                        }
                    ]
                ]   
            });

            if(this.isSet(children[i]['children']) && children[i]['children'].length > 0){
                level++;
                // Run recurence function for child-nodes
                jsp_o.setSuspendDrawing(true);
                this.connectGraphNodes(jsp_o, children[i]['children'], level);
                jsp_o.setSuspendDrawing(false, true);
            }
        }            
    }
}

我的问题是，对于大于 100 的数字，加载时间非常长，并且有时谷歌浏览器会弹出一个关闭选项卡选项。我可以对我的方法进行任何改进还是 jsPlumb 这么慢？

【问题讨论】：

jsPlumb 有一种暂停绘图的方法，推荐用于“当您有很多连接要建立或要注册的端点时”：jsplumbtoolkit.com/apidocs/files/…

标签： jquery algorithm jsplumb

【解决方案1】：

就像 Rich 已经提到的，你必须使用

jsPlumb.setSuspendDrawing();

方法

试试这个：

connectGraphNodes: function(jsp_o, children, level){
    var nr_of_children, i=0;

    nr_of_children = children.length;
    //start of suspend drawing
    jsPlumb.setSuspendDrawing(true);
    for(i=0; i<nr_of_children; i++){
        if(!this.isPropertyEmpty(children[i]['id']) && !this.isPropertyEmpty(children[i]['name'])){
            // Connect child node with node
            jsp_o.connect({ 
                source: 'es-org-graph-box-' + children[i]['parent'], 
                target: 'es-org-graph-box-' + children[i]['id'],
               overlays:[
                    [ "Label", {
                            label: children[i]['percentage']+'%', id:"label",
                            location: 1                                
                        }
                    ]
                ]   
            });

            if(this.isSet(children[i]['children']) && children[i]['children'].length > 0){
                level++;
                // Run recurence function for child-nodes
                jsp_o.setSuspendDrawing(true);
                this.connectGraphNodes(jsp_o, children[i]['children'], level);
                jsp_o.setSuspendDrawing(false, true);
            }
        }            
    }
    //end of suspend drawing
    jsPlumb.setSuspendDrawing(false,true);
}

【讨论】：