Javascript树的遍历和setTimeout

树是一种很常见的数据结构，我们每天浏览的HTML网页就是树形结构的。树的遍历是树的最基本的操作之一，通常实现的方式有两种，深度优先遍历（DFS）和广度优先遍历（BFS）。

深度优先遍历，是沿着树的深度遍历树的节点，尽可能深的搜索树的分支。它可以简单地使用递归来实现，为了方便起见我们以遍历DOM树为例实现一个DFS，这里就以的搜索框为遍历的对象吧！它的结构大家可以用F12检查元素看到，结构如下所示

深度优先遍历

深度优先遍历的实现非常简单

function DFS(dom,callback){
    for(var i=0;i

大家可以直接把上面的代码复制到F12之后的Console就能看到遍历结果了，结果为

INPUT * 2
I
A
FORM
LI

符合深度优先遍历里后序遍历的定义。深度优先遍历还有其他遍历方式，前序和中序，区别仅仅是遍历时访问对象的时机，遍历的搜索路径没有变化。对应到实现上，也就仅仅是改变callback函数的位置。

function DFS(dom,callback){
    // callback 在此为前序
    for(var i=0;i

广度优先遍历

广度优先遍历，是从根结点开始沿着树的宽度搜索遍历。它需要借助先进先出（FIFO）的队列来实现，每次把队列中队首元素取出并访问它，之后把它的子节点全部插入到队尾，循环下去直到队列为空。

function BFS(dom,callback) {
    var queue = [dom] // 一开始只有根元素
    function walk(dom){
        callback(dom) // 访问遍历到的元素
        for(var i=0;i

遍历的结果如下，也符合广度优先遍历的定义。

LI
FORM
INPUT * 2
A
I

setTimeout？

看到这里你可能会觉得，好像和setTimeout完全没有半毛钱关系。。。别急，我们稍微把深度优先搜索的代码改一下，就可以实现广度优先搜索了！

function BFS(dom,callback) {
    for(var i=0;i

遍历的结果和广度优先搜索的一致，在命令行输出中可能会多一个undefined，这个是函数BFS执行后表达式的返回结果，不影响树的遍历

LI
FORM
undefined
INPUT * 2
A
I

Why?

是不是非常神奇！我们仅仅加了两行代码，就把一个DFS搜索转变成了BFS搜索。
要解释这个问题，我们得了解Javascript的事件执行机制。Javascript采用的是在UI开发中广泛使用的事件循环机制Event Loop。所有的异步代码，包括点击事件、setTimeout延迟、Ajax请求等等，它们的回调都会被加入到一个统一的事件队列Queue中。
当前函数栈Stack为空时（可以理解为当前没有函数正在执行），Javascript运行时会从Queue中取出队首元素

• 如果Queue不为空，取出该函数，把它加入函数栈中去执行
• 如果Queue为空，则等待事件的到来

上面的过程会一致循环下去。为了方便理解，附上MDN上的图和代码~

while(queue.waitForMessage()){
    queue.processNextMessage();
}

Stack Queue Heap

我们通过setTimeout修改DFS为BFS，就是借助了Javascript的事件队列，把子元素的访问全部加入到事件队列中，当前函数执行完之后（访问根元素），再执行事件队列中的函数（访问子元素）。整个流程和DFS的算法流程一致。
同时，可能你也注意到我们在DFS的原始实现中，就已经借助到了一个FIFO的队列，这也能从另一个角度说明Javascript的事件执行机制和事件的FIFO队列。

事实上，在任何基于Event Loop事件模型的开发框架中，我们都可以借助其事件队列来“实现”从DFS到BFS的转换。
比如iOS开发中，Cocoa框架也由RunLoop实现了Event Loop，所以我们同样可以在iOS开发中借助GCD的方式实现，只不过是把setTimeout(fn,0)换成DispatchQueue.mian.async就行啦~