应用div模拟prompt存在的未能解决的问题

javascript中有几个模态阻塞对话框需要模拟分别是:


alert()
prompt()
confirm()
showModalDialog()


这些对话框的共同特点都是执行代码后,包含该代码的代码段都要停止或者说阻塞,等操作返回时,被阻塞的代码继续执行,类似断点。
通常,我们只所以要进行模拟,目的在于改善用户界面体验,或者说我们不想使用ie提供的那种默认的对话框样式,所以,我们想使用div层来进行模拟。
而模拟的难点其实在于如何实现一个类似于其他多线程编程语言中提供的Sleep()函数,但是,javascript是单线程执行的,这一点很可能不久的将来会得到改变,比如,以后很可能会支持如下的javascript脚本

function  getValue()
{
   
while( document.getElementById("name").value == "" )
   
{
        window.sleep(
100);//#####将来或许能支持,当前尚不支持该函数
   }

   
return document.getElementById("name").value
}

 

这段代码虽然很简单,但是,我认为,如果能实现该功能了,那么,对上面提到的模拟工作就没有问题的了。其实,我们真正需要的是一个能够使线程进入休眠状态从而让出时间片的sleep()函数,为什么这样说,如果上面的函数写成了像下面的样子,尽管功能是相同的,但是,确会使得程序进入死循环而造成页面假死状态

function  getValue()
{
    
while(document.getElementById("name").value=="")
    
{
    }

    
return document.getElementById("name").value;
}


因此,能否利用现有的javascript技术来模拟sleep()应该是该问题的一个核心所在。比如说我们试图写如下的代码段

var  name  =  myPrompt.show( " 请输入姓名: " );
alert(name);


我们的目的是希望我们自己的myPrompt.show()函数创建一个div层来模拟prompt(),这点不难做到,继续下去,在myPrompt.show()里面创建一个div层之后,就需要等待用户输入并点击确定按钮了,确定后,提取用户输入内容作为myPrompt.show()的返回值,问题就在于,我们如何在myPrompt.show()函数中创建一个div层后等待用户的输入,直到用户输入并点击确定按钮后,再继续执行myPrompt.show()函数后面的代码,我们最容易想到的解决办法就是执行一个循环语句,循环检测某个变量是否被赋值(该变量是在用户点击确定按钮时赋值的),如果还没有被赋值,那么,继续等,如果赋值则结束循环,代码继续。如何实现这个,回到了前面讨论的那个getValue()的实现上了,要循环检测但又不造成假死,只有实现sleep()的功能。

我为了做测试,实现了一个模拟prompt的代码,但是!!!!上面提到的问题没有解决!!!!把代码贴出来,希望和兄弟们一起讨论解决之道。

注意:this.waitForUserInput();就是我无法实现的一个函数,也就是模拟sleep()功能

AjaxPrompt  =  
{
 div_handle:
null,
 msk_handle:
null,
 div_value:
null,
 timer_name:
null,
 show:
function()
 
{
  
this.showMaskPage();
  
this.showMyPrompt();
  
this.waitForUserInput();
  
this.hideMaskPage();
  
return this.div_value; 
 }
,
 showMaskPage : 
function()
 
{
  
this.msk_handle = document.createElement("<div style="z-index:1000;position:absolute;top:0;left:0;width:"+document.body.clientWidth+";height:"+document.body.clientHeight+""></div>");
  document.body.appendChild(
this.msk_handle);
  
this.msk_handle.innerHTML = "<iframe style="FILTER:Alpha(opacity=20);width:100%;height:100%"></iframe>";
 }
,
 hideMaskPage : 
function()
 
{
  
if(this.msk_handle!=null)
  
{
   document.body.removeChild(
this.msk_handle);
   
this.msk_handle = null;
  }

 }
,
 showMyPrompt : 
function()
 
{
  
this.div_handle= document.createElement("<div style=z-index:1001;position:absolute;top:200;left:300;width:100;height:50;background-color:#cccccc></div>");
  
this.div_handle.innerHTML = "<input id=myprompt_userinput value=请您输入数据><input id=myprompt_button type=button value=确定>";
  document.body.appendChild(
this.div_handle);
  document.getElementById(
"myprompt_button").onclick = this.setUserInput;
 }
,
 setUserInput : 
function()
 

  AjaxPrompt.div_value 
= document.getElementById("myprompt_userinput").value;
  document.body.removeChild(AjaxPrompt.div_handle);
 }
,
 waitForUserInput : 
function()
 
{
  
//这里需要实现类似sleep()的功能
 }

}


代码希望如下调用

function  test()
{
    
var name = AjaxPrompt.show();
    alert(name);
}


但是,由于this.waitForUserInput();没有能够实现预想的效果,因此,运行后,alert出来的始终是null
 

你可能感兴趣的:(JavaScript,多线程,function,null,div,button)