用JavaScript写的二叉树遍历，前序没有问题，但是后序和中序遇到了bug，求高人指点

Question

最近在写百度前端技术学院的作业，写到第22题二叉树遍历，题目要求：
http://ife.baidu.com/task/det...

我写的demo：
https://yisha0307.github.io/I...

html代码:
https://github.com/yisha0307/...

js代码：
https://github.com/yisha0307/...

我遇到的问题是：我的前序没有问题，但是中序和后序出现了bug，没法做动画，但是我的前序、中序、后序的代码几乎一致，我实在看不出来有啥不对的地方啊，还请高人指点一二：

贴一段我的代码（更详细的可以看我上面贴的地址，但我觉得是这个inOrder和postOrder不知哪里出了bug）：

var preOrder = function(node){
    if(node !== null){
        nodeArr.push(node);
        preOrder(node.firstElementChild);
        preOrder(node.lastElementChild);
    }
    render(nodeArr);
};

var inOrder = function(node){
    if(node !== null){
        inOrder(node.firstElementChild);
        nodeArr.push(node);
        inOrder(node.lastElementChild);
    }
    render(nodeArr);
};

var postOrder = function(node){
    if(node !== null){
        postOrder(node.firstElementChild);
        postOrder(node.lastElementChild);
        nodeArr.push(node);
    }
    render(nodeArr);
};

Answer 1

代码看着没毛病，建议题主利用console单步调试一下就知道了！

其实主要在于，render方法的执行问题，inOrder在遍历的时候一直递归到最左子树的时候，最左节点的firstElementChild是null，然后inOrder(null),结果就是if判断跳过直接就render([])，此时nodeArr根本就没有元素在里面，因为你还在递归第一个inOrder还没到push的情况。

同样postOrder也是这个道理！

根据你这个代码来看，最简单的就是把render抽出来，放到点击回调执行完遍历得到nodeArr之后，再调用

$(document).ready(function(){
    var treeRoot = $('body > p')[0];
    $('#root').click(function(){
        reset();
        preOrder(treeRoot);
        render(nodeArr);
    });
    $('#left').click(function(){
        reset();
        inOrder(treeRoot);
        render(nodeArr);
    });
    $('#right').click(function(){
        reset();
        postOrder(treeRoot);
        render(nodeArr);
    });

})

var timer=null, nodeArr =[];
var preOrder = function(node){
    if(node !== null){
        nodeArr.push(node);
        preOrder(node.firstElementChild);
        preOrder(node.lastElementChild);
    }
    console.log(nodeArr);
    //render(nodeArr);
};

var inOrder = function(node){
    if(node !== null){
        inOrder(node.firstElementChild);
        nodeArr.push(node);
        inOrder(node.lastElementChild);
    }
    console.log(nodeArr);
    //render(nodeArr);
};

var postOrder = function(node){
    if(node !== null){
        postOrder(node.firstElementChild);
        postOrder(node.lastElementChild);
        nodeArr.push(node);
    }
    console.log(nodeArr);
    //render(nodeArr);
};

var render = function(arr){
    var i=0;
    arr[i].style.backgroundColor='pink';
    timer = setInterval(function(){
        if(i<arr.length-1){
            i++;
            arr[i-1].style.backgroundColor = 'white';
            arr[i].style.backgroundColor = 'pink';
        }else{
            arr[arr.length-1].style.backgroundColor ='white';
            window.clearInterval(timer);
        }
    },500);
};

var reset = function(){
    nodeArr=[];
    window.clearInterval(timer);
    $('p').css('background-color','white');
}