使用Javascript缓存数据与延迟加载收藏

不论是直接从链接访问服务器获取数据还是使用了AJAX动态请求数据，只要一次性的传输数据量很大，还需要用脚本语言来将数据装入某个控件，都有可能导致显示缓慢，比如树形菜单，不需要太多条数据，200条就足够你等待5秒以上。
而基于实际中用户并不需要一次性看到所有数据，我们可以使用脚本来延缓加载，并且能够保证表象的显示，因为我们需要做的就是及时地显示一部分表面数据。

缓存数据包括二种格式：

一种是用户自定义的外部格式，它不属于缓存延迟加载构件，由用户指定，例如：

function DataObject(id,name,age,gender,edu)  ...{ 
   this.id=id;
   this.name=name;
   this.age=age;
   this.gender=gender;
   this.edu=edu;
}

 一种是缓存延迟加载器的内部格式，它是缓存延迟加载构件的一部分，代码如下：

function CacheData(params,funces) ...{
   this.params=params;
   this.funces=funces;
}

 它的目的就是封装用户数据格式：params对应用户自定义数据对象，funces对应的是方法名，解释为缓存一个要执行的方法funces，方法的参数为params.

缓存延迟加载器采用双缓冲区，可以一边操作数据，一边装入数据，特别针对树形数据结构：

var cache  = ...{ 
     //加载使用的表数据与大小，用于显示，加载表
     list: new Array(),
     count: 0,
    //装入使用的表数据与大小，用于缓存，缓存表
     _list: new Array(),
     _count: 0,
     //加载使用的当前游标
     cursor: 0,
    //延缓加载的时间间隔
     interval:100,
    //一次execute方法后的结束处理函数
     endfunc:"endfunc();",
    //缓存一条数据到内存
     add   :function(params,funces)...{
       this._list[this._count++]=new CacheData(params,funces); 
     },
    //清空数据缓存
     clear:function()...{
       this.list=null;
       this.count=0;
       this._list=new Array();
       this._count=0;
     },

    //获取当前正在加载的一行数据
     params :function()...{
       return this.list[this.cursor].params; 
     },
     funces :function()...{
       return this.list[this.cursor].funces; 
     },
    //延迟加载的执行方法
     execute: function() ...{
       //将缓存数据 从缓存表移动到加载表
        this.list=this._list; 
       this.count=this._count;
       //重置缓存表数据
       this._list=new Array();
       this._count=0;
       //遍历调用方法func并将游标定位在其相应参数
       for(var i=0;i<this.count;i++) ...{
           this.cursor=i; 
           eval(this.funces);
        }
       //执行恢复函数
        eval(this.endfunc);
       //如果缓存数据，再次延迟加载
       if(this._count>0)   setTimeout("cache.execute();",interval); 
             else                eval("cache.clear();");
     }
}

 在函数funces中参数调用必须使用：

 var   id        =      cache.params.id;
  var   name  =      cache.params.iname;