js树的异步加载功能

之前用到了力软的框架，用了里面的tree.js,发现功能十分弱，本来想找另一个工具，但是想想正好可以锻炼一下写js的能力，于是就自己加了很多功能上去。其中有一个得意之作，就是树的异步加载功能。

树一般有两种方式展开。一种是把所有的树节点在后台拼接成{id:"id",name:"name",parentId:"parentId",ChildNodes:[]}这样的结构，然后再展开。另一种是逐级展开。就是在请求中加入parentId参数，每次都只访问一级。在数据量比较大的时候一般采取第二种方式。

这个时候一般只返回第一级的根目录。然后点击节点展开再发出请求，展开节点。但是我现在要全部加载出来，这时候问题就出现了。这种方式要发出很多个请求。他原来的方法是同步请求，所有请求执行完之后拼接成一个html元素再显示，但是这样就回发现速度很慢。表现出来的效果就很丑。但是如果将请求改成异步又出现了问题。

比如说我有结构

A-B - B1

       -B2

  -C

当拼接B节点时，发现其有子节点，于是发出请求，因为请求是异步的，于是继续拼接C元素，这样的话拼接的顺序就完全乱了。

我研究了一下，当时正好看了NIO的技术。于是我想就在这里运用一下，实现之后效果还可以。不知道别人是怎么实现的，不同我想思路都是差不多的把。

因为代码比较多，就说一下思路，贴一部分代码。

首先NIO技术其实就是缓存。我先在树里面加一个缓存对象cache,在访问子节点时，将返回的对象保存到cache对象中，用父节点的id作为键名，而不是直接拼接字符串。同时开启一个定时器。处理缓存的信息。

        function time()  
        {  
          if(timeout) return;  
          autoexpand();  
          setTimeout(time,10); //time是指本身,延时递归调用自己,100为间隔调用时间,单位毫秒  
        } 
        function autoexpand(){
        	var length = Object.keys(cache).length;
        	if(length == 0){
        		timeCount++;
//        		if(timeCount>10){//保险起见，当调用十次定时器缓存为空时，关闭定时器。只要处理好逻辑顺序就不用这一步
        			timeout = true;
        			dfop.onTreeLoad.call();
//        		}
        		return ;
        	}
        	for(var k in cache){
        		if(typeof cache[k] == "boolean")//当发现节点有子节点时，将节点的id作为键名，保存一个boolean值
        			continue;//等请求返回值后再讲返回值放入cache对象，这么做的目的是占个坑，不然缓存很容易为空    
	    		if(!!$("#"+k)[0]){//判断页面是否存在父节点元素，存在则将缓存的子节点元素加入页面
	        		$("#"+k).next().html(cache[k]);
	                        InitEvent($("#"+k).parent());//给节点加上事件
	        		delete cache[k];//删除缓存
	        		return;
	        	}
        	}
        	
        }