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

代码看着没毛病，建议题主利用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');
}