govo

 　　在Ajax应用中，我们常常要频繁更改某一元素的值。例如有一ID为"pageBody"的元素，我们想把所有文章内容都在这里显示，做到局部刷新的Ajax应用。但如果因为网速较慢，使得此元素在接收信息时就被用户执行其它行为，而改变此元素的内容了，而之前的接收信息的线程还在进行着，当此线程完成了，又把pageBody的值改了一下，此时用户会觉得不知所措，怎么这块东西闪来闪去的？严重者，会因为子元素的消失而出现JS错误的现象。
　　为了解决此问题，有两个方法：第一、在执行线程（假设执行一次取值为一个线程）的时候，建立一个满屏的DIV，使得用户无法执行其它行为；第二、制作一把锁，把此元素锁起来，当其它线程想改变它的值时先查检此元素是否上锁。
　　第一种方法使得用户进入了等待状态，虽然页面没有刷新，但与没有使用Ajax的页面没什么分别，所以在非不得已的情况下都不要使用此方法。
　　下面我说说第二种方法－－制作元素锁。
　　其实要实现这个锁，原理很简单，与java中的线程锁有点类似，可惜偶对java的线程锁理解不深入，所以在javaScript中此锁与java的线程锁应该又会有很大的不同，甚至完全不是一个回事。
　　首先，我们需要一个Object， 

其中key为此对象的标识，value是否为真就等于是否为锁定。
在java中，每一个Object对象都可以用作锁，但javaScript中不同，而且通过

的方法根本行不通，因为这个while(true)会让浏览器僵死，Firefox会提示是否继续执行脚本,IE可能会说脚本有误，杀毒软件可能说这是病毒！
　　为了能统领全局，更灵活的掌控它，我们把锁都放到一个数组中：

同时，为了方便应用，我使用了Prototype.js，以扩展Array的方法，主要用这三个方法：
1、detect(iterator)：集合中每个元素调用一次Iterator，返回第一个使Iterator返回True的元素，如果最终都没有为true的调用，那么返回null。
 2、reject(iterator)：返回所有等于false的元素。
 3、each(iterator)：把每个element做为第一个参数，element的index作为第一个参数调用iterator函数。
 有了它们，我们可以创建一个Push来给 _mainlock加入唯一key的锁，类似HashMap原理：

  var  _Push = function (Obj) {
   var  unIns = _mainlock.reject( function (d) { return  d.key == Obj.key;} );
  _mainlock = unIns;
  _mainlock.push(Obj);
 }

只要执行_Push(_key)就可以把对象放入这个伪HashMap中去。如果已有相同的key的对象，则会覆盖它，没有就直接放入。

var  get = function (key) {
   return  _mainlock.detect( function (d) { return  d.key == key;} );
 } ;

 通过这个方法，就可以取得相应Key的锁了。
 因为JavaScript对DOM的操作有着很多未知性，不可能总是通过我们预先定义的变量来满足要求，如一个列表，可能是有一行，也可能上千行，每一行的ID又是独立的，所以我们只能用另外的方法来预见之此行为，那就是通过应用HashMap的特性，以string为标识的唯一Key来统领所有将可能发生的事件。因此，再写一个方法：

  var  Lock = function (key) {
   var  _key = {key:key,value: true } ;
  _Push(_key);
   return   true ;
 } ;

这样，只要有一个string类型的key，就可以建立一个锁对象了。以后，对锁的建立和获取，都可以通过上面三个方法来实现,只要一个string作为Key来操作锁,而无需知道锁的内部是如何构造。
接下来，我们要实现isWait(),sleep(),awake()和awakeAll()方法，以完善这个锁：

  var  isWait = function (key) { // 返回真表示锁，否则表示非锁
   var  ins = GDnews.get(key);
   if (ins)  return  ins.value;
   return   false ;
 } ;
  var  sleep = function (key,time) { // 给锁上锁指定秒数，若干秒后自动解锁
  GDnews.Lock(key);
  window.setTimeout( function () {GDnews.awake(key)} ,time);
 } ;
  var  awake = function (key) { // 强行开锁
   var  _key = {key:key,value: false } ;
  GDnews._Push(_key);
   return   false ;
 } ;
  var  awakeAll = function () { // 强行打开所有锁
   if ( ! GDnews._mainlock)  return   " all " ;
   var  newList = [];
  GDnews._mainlock.each( function (d,index) {
   d.value = false ;
   newList.push(d);
  } );
  GDnews._mainlock = newList;
   return   false ;
 } ;
 

 以后，当你使用Prototype.js的快捷键$()时，就可以看看目标是否为isWait，否的话就可以Lock或者sleep一下了。

 以上就是全文内容，请各位指点。