模态对话框导致setTimeout无效的解决方案（二）

阅读更多

之前的方案一，请参照：http://rainbow702.iteye.com/admin/blogs/2040051

 

这篇写下方案二。

这个方案用到了HTML5中新的API，web worker。

web worker 能够产生一个独立于主线程的子线程，它们之间除了通信之外，是不会互相干扰的。而恰好，在web worker 也能够使用 setTimeout 来定时，所以，我就自然而然的想到了，把之前在主画面启动的定时器依赖web worker去做。下面就是这个方案的基本实现。

① 新建主画面，代码如下，其中，worker部分的代码是关键：

    启动定时器
    打开模态对话框
    

        
定时更新内容：
        

    
    

        
模态对话框状态：
        

    

 ② 在①中通过 timer.js 来创建了一个worker，下面即为 timer.js  的代码：

this.onmessage = function(task){
	var interval = task.data;
	
	this.setTimeout(function(){
						// 只需要给主线程一个信号就可以了，不需要任何返回值
						this.postMessage("");
					}, interval);
};

 ③ 模态对话框的内容：

    

        
我是模态对话框，父画面传给我的值是： 
        

    
    

 ④ 下面附上worker的工作过程

 

 

PS：

① 上述方案，不仅对showModalDialog有效，对alert之类的对话框也是有效的。

② 如果在woker中的任何地方(比如，在主画面的 onmessage 中)，弹出了alert的话，上述方案将会失效，因为worker也会被alert阻断的。

• worker.zip (1.6 KB)
• 下载次数: 3

• 
• 大小: 18.4 KB

• 查看图片附件