递归回调的实现
作者：互联网
背景
异步树展开如果要实现展开回调比较困难，因为展开的过程是异步的。
前端：js引擎虽然是单线程执行，但是操作ui的线程是单独的，树的展开过程，就经历了js引擎线程+ui线程的过程，展开代码和展开回调的代码在不同时机执行的，本质上就是异步的。
展开回调的实现
展开回调的实现困难点在于判断展开结束的时机。树的展开是一个递归过程，本质上就是判断递归的结束时机。递归的过程，其实就是进栈出栈的过程。如果我们能够统计进栈出栈的次数，就能够判断出结束的时机。下面是验证代码(Java)
1.树
package com.hdwang.test.recursize;
import java.util.ArrayList;
import java.util.List;
/**
* @author wanghuidong
* 时间： 2022/8/13 22:36
*/
public class TreeNode {
private int id;
private int level;
List<TreeNode> children = new ArrayList<>();
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getLevel() {
return level;
}
public void setLevel(int level) {
this.level = level;
}
public List<TreeNode> getChildren() {
return children;
}
public void setChildren(List<TreeNode> children) {
this.children = children;
}
@Override
public String toString() {
return "TreeNode{" +
"id=" + id +
", level=" + level +
'}';
}
}
2.回调接口
package com.hdwang.test.recursize;
/**
* @author wanghuidong
* 时间： 2022/8/13 22:54
*/
@FunctionalInterface
public interface Callback {
void callback();
}
3.树的展开回调实现
package com.hdwang.test.recursize;
import java.util.Timer;
import java.util.TimerTask;
import java.util.concurrent.atomic.AtomicInteger;
/**
* 递归测试
*
* @author wanghuidong
* 时间： 2022/8/13 22:34
*/
public class RecursiveTest {
static AtomicInteger treeRecursiveEnterCount = new AtomicInteger(0);
static AtomicInteger treeRecursiveExitCount = new AtomicInteger(0);
static AtomicInteger treeRecursiveRemainCount = new AtomicInteger(0);
static AtomicInteger treeRecursiveCount = new AtomicInteger(0);
static Timer timer = new Timer();
public static void main(String[] args) {
//构造一颗树
TreeNode rootNode = buildTree();
//打印树
System.out.println("==================printTree==================");
printTree(rootNode);
//展开回调（若异步退出需写在异步函数里）
System.out.println("==================expandTree==================");
expandTree(rootNode, new Callback() {
@Override
public void callback() {
System.out.println("callback execute");
//结束时间器
timer.cancel();
}
});
}
private static TreeNode buildTree() {
TreeNode rootNode = new TreeNode();
rootNode.setId(1);
rootNode.setLevel(0);
TreeNode treeNode21 = new TreeNode();
treeNode21.setId(2);
treeNode21.setLevel(1);
rootNode.getChildren().add(treeNode21);
TreeNode treeNode211 = new TreeNode();
treeNode211.setId(4);
treeNode211.setLevel(2);
treeNode21.getChildren().add(treeNode211);
TreeNode treeNode22 = new TreeNode();
treeNode22.setId(3);
treeNode22.setLevel(1);
rootNode.getChildren().add(treeNode22);
return rootNode;
}
/**
* 打印树
*
* @param node
*/
static void printTree(TreeNode node) {
System.out.println(node);
if (!node.getChildren().isEmpty()) {
for (TreeNode childNode : node.getChildren()) {
printTree(childNode);
}
}
}
static void expandTree(TreeNode node, Callback callback) {
//进入递归函数，统计递归进入次数
treeRecursiveCount.incrementAndGet();
treeRecursiveEnterCount.incrementAndGet();
treeRecursiveRemainCount.incrementAndGet();
printRecursiveCounts();
//展开结点（模拟异步）
timer.schedule(new TimerTask() {
@Override
public void run() {
System.out.println("展开结点：" + node);
//递归孩子
if (!node.getChildren().isEmpty()) {
for (TreeNode childNode : node.getChildren()) {
expandTree(childNode, callback);
}
treeRecursiveExitCount.incrementAndGet();
treeRecursiveRemainCount.decrementAndGet();
printRecursiveCounts();
if (treeRecursiveRemainCount.get() == 0) {
callback.callback();
}
} else {
treeRecursiveExitCount.incrementAndGet();
treeRecursiveRemainCount.decrementAndGet();
printRecursiveCounts();
if (treeRecursiveRemainCount.get() == 0) {
callback.callback();
}
}
}
}, 1000);
}
private static void printRecursiveCounts() {
System.out.printf("递归次数：%d,进入次数：%d,退出次数：%d,剩余次数：%d\n",
treeRecursiveCount.get(), treeRecursiveEnterCount.get(), treeRecursiveExitCount.get(), treeRecursiveRemainCount.get());
}
}
4.测试结果
==================printTree==================
TreeNode{id=1, level=0}
TreeNode{id=2, level=1}
TreeNode{id=4, level=2}
TreeNode{id=3, level=1}
==================expandTree==================
递归次数：1,进入次数：1,退出次数：0,剩余次数：1
展开结点：TreeNode{id=1, level=0}
递归次数：2,进入次数：2,退出次数：0,剩余次数：2
递归次数：3,进入次数：3,退出次数：0,剩余次数：3
递归次数：3,进入次数：3,退出次数：1,剩余次数：2
展开结点：TreeNode{id=2, level=1}
递归次数：4,进入次数：4,退出次数：1,剩余次数：3
递归次数：4,进入次数：4,退出次数：2,剩余次数：2
展开结点：TreeNode{id=3, level=1}
递归次数：4,进入次数：4,退出次数：3,剩余次数：1
展开结点：TreeNode{id=4, level=2}
递归次数：4,进入次数：4,退出次数：4,剩余次数：0
callback execute
javascript实现版
下面是对 vue框架element-ui库中的tree组件 实现的展开回调，实现功能：展开异步树指定结点然后勾选结点
//展开匹配的结点，根结点默认展开
expandNodes(nodeDataIds){
let that = this;
let tree = this.$refs.tree;
let rootNode = tree.root;
this.expandNode(rootNode, nodeDataIds, function(){
that.checkNodes(['node001','node002']);
});
},
//展开指定结点下匹配的结点
expandNode(node, nodeDataIds, callback){
let that = this;
//递归进入
that.recursiveEnter();
//当前结点需要展开未展开，则展开(根结点默认展开)
if(node.level==0 || nodeDataIds.indexOf(node.data.id) != -1){
//展开孩子结点
let expandChildren = function(){
let childNodes = node.childNodes;
if(childNodes.length > 0){
for (let i = 0; i < childNodes.length; i++) {
let childNode = childNodes[i];
//递归展开孩子结点
that.expandNode(childNode, nodeDataIds, callback);
}
}
}
if(!node.expanded){
//当前结点未展开则先展开，展开后再展开孩子结点
node.expand(function(){
//展开孩子结点
expandChildren();
//递归退出
that.recursiveExit(callback);
});
}else{
//当前结点已展开，直接展开孩子结点
expandChildren();
//递归退出
that.recursiveExit(callback);
}
}else{
//递归退出
that.recursiveExit(callback);
}
},
//递归计入计数剩余递归次数
recursiveEnter(){
this.recursiveRemainCount++;
console.log('enter recursiveRemainCount', this.recursiveRemainCount)
},
//递归退出计数剩余递归次数
recursiveExit(callback){
this.recursiveRemainCount--;
console.log('exit recursiveRemainCount', this.recursiveRemainCount)
if(this.recursiveRemainCount==0){
if(callback){
callback();
}
}
},
checkNodes(nodeDataIds){
let tree = this.$refs.tree;
tree.setCheckedKeys(nodeDataIds, false)
}
总结
递归回调的实现，可以用一个变量统计剩余递归次数，当剩余递归次数为0时，则表示递归结束，可以执行回调函数。前端js是单线程，无需考虑线程安全问题，后端则需要考虑线程安全问题，java可以用原子类AtomicInteger统计次数。
标签：结点,TreeNode,递归,callback,实现,次数,回调,展开 来源： https://www.cnblogs.com/hdwang/p/16584597.html