递归回调的实现

背景

异步树展开如果要实现展开回调比较困难，因为展开的过程是异步的。

前端：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统计次数。