Question

我正在使用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是那么缓慢？

Answer 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);
}

jsPlumb提高了执行速度

1 个答案: