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

来源：互联网发布：淘宝日系女装店铺推荐编辑：程序博客网时间：2024/05/12 21:07

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

这篇写下方案二。

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

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

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

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>模态对话框导致setTimeout无效的解决方案（二）</title><script>    var worker = null;    function start() {        (event.target || event.srcElement)["disabled"] = true;        // 使用web worker来进行定时if(!worker) {worker = new Worker("timer.js");worker.onmessage = function() {document.querySelector("#txt").innerText = Math.random();worker.postMessage(1000);};}worker.postMessage(1000);    }        function dlgOpenButton() {        document.querySelector("#txt2").innerText = "模态画面打开中。。。";        var val = window.showModalDialog("dialog.html",Math.random());// 对alert框也仍然有效        // var val = window.alert("我是alert框");        document.querySelector("#txt2").innerText = "模态画面关闭了,返回值为： " + val;    }</script></head><body>    <button type="button" onclick="start()">启动定时器</button>    <button type="button" onclick="dlgOpenButton()">打开模态对话框</button>    <div>        <p style="float: left;">定时更新内容：</p>        <p id="txt" style="float: left;"></p>    </div>    <div style="float: left; clear: left;">        <p style="float: left;">模态对话框状态：</p>        <p id="txt2"></p>    </div></body></html>

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

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

③ 模态对话框的内容：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>我是模态对话框</title><script>    window.onload = function() {        var para = window.dialogArguments;        document.querySelector("#fromParent").innerText = para;    };        window.onunload = function() {        window.returnValue = Math.random();      };</script></head><body>    <div>        <p>我是模态对话框，父画面传给我的值是： </p>        <p id="fromParent"></p>    </div>    <br/></body></html>

④ 下面附上worker的工作过程

PS：

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

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

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

大小: 18.4 KB

查看图片附件

0 0