zTree v2.x 升级 v3.0 之 异步加载 与 添加节点的错误分析

      (补充： 计划 v3.1 中修改进行异步加载的逻辑： 父节点默认状态下只能异步加载一次，除非 使用 reAsyncChildNodes 方法强行进行异步加载。这样也就不会出现这个要讨论的错误了。)

    zTree v3.0 对于可编辑模式 和 异步加载模式共存的处理做了一些完善，从而也会导致使用原先 v2.x 实现的方法放在 v3.0 下出现异常。

 

    这里针对 onAsyncSuccess 回调函数中 使用  addNodes 添加节点 的问题做一个详细说明。

 

    错误现象（此问题由：overlord 朋友提供）：

 

    利用Demo中的 async.html 做测试，让 setting 中增加 onAsyncSuccess 的配置，代码如下：

 

 

onAsyncSuccess:function(event, treeId, treeNode, msg){//如果没有加载到子结点就会执行多次
	console.log("onAsyncSuccess...");
	var da = $.fn.zTree.getZTreeObj("treeDemo").addNodes(treeNode,{name:'你好',isParent:true}, true);
}

 

    A、如果异步加载的地址只能输出 []，表明是空结果，这样会发现根节点显示正常，只有一个“你好”的节点，但如果点击展开“你好”节点后，会发现会自动添加 3 个“你好”的子节点。 

 

    B、如果异步加载能过输出正常节点数据，那么不会出现此问题，每次异步加载后都只添加 1 个 "你好" 的子节点。

 

    为何如此使用？ 

 

    我个人推断，是因为 v2.x 中添加子节点时，父节点不会自动异步加载已有的子节点，所以利用expandNode方法让父节点展开，同时捕获 asyncSuccess 方法确认加载完毕 并 添加新的子节点。

 

    （v3.0 中完全不需要这么操作，只需要直接使用 addNodes 方法，zTree 会自动先去异步加载已有的子节点，然后再添加新的子节点。）

 

    因此，我要说对于 v3.0 来说，要尽量避免在 onAsyncSuccess 回调中使用  addNodes、reAsyncChildNodes 这两个方法，因为如果使用不当有可能会造成事务流程的多次循环。

 

    如果你有兴趣做深入了解，请先看看 v2.x 和 v3.0 中针对 addNodes 和 expandNode 两个操作的事务流程图

 

 

当你理解的上面的流程图以后，再看看针对这个错误制作的事务流程图，就会明白为何会产生3个节点了。（其中每种颜色代表了一次线程的操作过程）

 

 

这里特别感谢  overlord  和 czwlucky 两位朋友的大力协助。 同时也希望大家能一起讨论这个问题。