中序遍历详解

思路前四次都执行函数A，得到1,2,3,4，添加4，3,第五次执行B，得到4，添加4，接着添加2，第六次执行函数B，得到3，在添加3之前第七次执行函数A，得到4，添加4，在添加3，,第八次执行函数B，得到4，添加4，在添加1，第九次执行函数B，得到2，在添加之前第10次执行函数A;得到3，第11次执行函数A，得到4，添加4,3，添加3后立即第12次执行函数B，得到4，储存为2,4，先添加4，再添加2，接着第13次执行函数B，得到3，在添加3之前第14次执行函数A，得到4，添加4，再添加3，最后一次执行函数B，得到4，添加4

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Binary Tree</title>
    <link rel="stylesheet" href="styles/reset.css">
    <link rel="stylesheet" href="styles/main.css">
</head>

<body>
<div class="box-container">
    <div class="level-1" id="top-level">
        <div class="level-2">
            <div class="level-3">
                <div class="level-4"></div>
                <div class="level-4"></div>
            </div>
            <div class="level-3">
                <div class="level-4"></div>
                <div class="level-4"></div>
            </div>
        </div>
        <div class="level-2">
            <div class="level-3">
                <div class="level-4"></div>
                <div class="level-4"></div>
            </div>
            <div class="level-3">
                <div class="level-4"></div>
                <div class="level-4"></div>
            </div>
        </div>
    </div>
</div>

<div class="btn-container">
    <input type="button" value="前序遍历" id="preorder">
    <input type="button" value="中序遍历" id="inorder">
    <input type="button" value="后序遍历" id="postorder">
</div>

<script>
    var traverse = [];
    var timer;
 //中序遍历
    function inOrder(tree) {
        console.log(tree);
        if (tree !== null) {
            inOrder(tree.firstElementChild);
            traverse.push(tree);
            inOrder(tree.lastElementChild);

        }

    }
 window.onload = function () {
 document.getElementById("inorder").onclick = function () {
            clearTraverse();
            inOrder(domTree);
            animate(traverse);
            console.log(traverse);
        };
 };

    //清理前一个遍历
    function clearTraverse() {
        var allDiv = document.getElementsByTagName("div");
        for (var i = 0; i < allDiv.length; i++) {
            allDiv[i].setAttribute("background","#fff");
        }
        clearInterval(timer);
        traverse = [];
    }
//将遍历结果用动画展示
    function animate(traverse) {
        var i = 0;
        traverse[i].style.background = "#fec8b0";
        timer = setInterval(function () {
            i++;
            if (i < traverse.length) {
                traverse[i - 1].style.background = "#fff";
                traverse[i].style.background = "#fec8b0"
            }
            else {
                clearTraverse();
                traverse[traverse.length - 1].style.background = "#fff";
            }
        },500);
    }