`
Rainbow702
  • 浏览: 1084724 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类

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

阅读更多

之前的方案一,请参照: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阻断的。

  • 大小: 18.4 KB
分享到:
评论

相关推荐

    模态对话框导致setTimeout失效的解决方案(一)

    在IT行业中,我们经常遇到各种各样的问题,其中之一就是在使用模态对话框时,发现`setTimeout`函数似乎不再按照预期工作。这个问题主要出现在JavaScript编程环境中,尤其是在与UI交互时。模态对话框,如Bootstrap的...

    scratch少儿编程逻辑思维游戏源码-Pyorovania.zip

    scratch少儿编程逻辑思维游戏源码-Pyorovania.zip

    scratch少儿编程逻辑思维游戏源码-弹力猫.zip

    scratch少儿编程逻辑思维游戏源码-弹力猫.zip

    scratch少儿编程逻辑思维游戏源码-地心引力.zip

    scratch少儿编程逻辑思维游戏源码-地心引力.zip

    基于金枪鱼群优化算法的SVM在多变量时间序列预测中的MATLAB实现及优化

    内容概要:本文介绍了一种基于金枪鱼群优化算法(TSO)和支持向量机(SVM)的混合算法模型——TSO-SVM,在多变量时间序列预测中的应用。文中详细解释了TSO-SVM的工作原理,即通过模拟金枪鱼群觅食行为来优化SVM的参数,从而提升预测性能。同时提供了具体的Matlab代码实现步骤,包括参数初始化、模型训练和预测。实验结果显示,TSO-SVM相较于传统SVM方法,显著提升了预测的准确性和稳定性,并展示了良好的泛化能力。 适合人群:对机器学习尤其是时间序列预测感兴趣的科研人员和技术开发者。 使用场景及目标:①需要进行多变量时间序列预测的研究项目;②希望利用自然启发式优化算法改善现有SVM模型效果的技术团队。 其他说明:推荐使用Libsvm工具箱配合Matlab 2018B及以上版本,仅限于Windows 64位操作系统。

    机器视觉技术:OpenCV与Qt在工业相机采集及图像处理中的应用

    内容概要:本文深入探讨了机器视觉技术,重点介绍了OpenCV和Qt在工业相机采集及图像处理中的应用。文中详细讲述了卡尺工具、找线、找圆、颜色检测、模板匹配及形状匹配等关键技术的具体实现方法,并特别强调了海康工业相机采集与基于形状的模板匹配界面的开发。此外,形状匹配算法已被封装成DLL,方便直接调用。通过实际案例和技术解析,帮助读者全面掌握机器视觉系统的构建。 适合人群:对机器视觉感兴趣的初学者、有一定编程基础的研发人员、从事工业自动化领域的工程师。 使用场景及目标:适用于希望深入了解机器视觉技术及其应用场景的专业人士,旨在提升图像处理能力,优化工业自动化流程,提高生产效率。 其他说明:文章不仅提供理论知识,还附有示例代码,便于读者动手实践并加深理解。

    scratch少儿编程逻辑思维游戏源码-Billy奇妙之旅.zip

    scratch少儿编程逻辑思维游戏源码-Billy奇妙之旅.zip

    电动汽车BMS电池管理系统应用层软件模型:MBD方法、通信协议及AUTOSAR构建

    内容概要:本文详细介绍了基于模型开发(MBD)的BMS电池管理系统应用层软件模型。首先概述了BMS的核心任务,即确保电池的安全与高效运行,涉及充电、放电控制、实时监测和电池均衡管理。接着重点讨论了SUMlink电池管理系统策略模型,该模型通过收集和处理电池的数据(如电压、电流、温度),并运用多种算法(如SOC估算、SOH评估)来优化电池性能。文中还阐述了BMC CVS内部通讯协议DBC的作用,确保各模块间数据传输的准确性与效率。最后,介绍了AUTOSAR标准在BMS系统中的应用,特别是针对MPC5644A芯片的底层Build工程,提高了系统的可维护性、可扩展性和可靠性。此外,提到了INCA A2L标定文件的应用,用于配置和调整系统参数,以满足不同需求。 适合人群:从事电动汽车电池管理系统研究与开发的技术人员,尤其是对MBD方法、通信协议和AUTOSAR标准感兴趣的工程师。 使用场景及目标:适用于希望深入了解BMS系统的设计原理和技术细节的专业人士,旨在提高他们对该领域的理解和实际操作能力。 其他说明:通过对代码的具体分析,读者能够更加直观地理解BMS的工作流程及其各个组件间的协作关系。

    少儿编程scratch项目源代码文件案例素材-深海困境.zip

    少儿编程scratch项目源代码文件案例素材-深海困境.zip

    少儿编程scratch项目源代码文件案例素材-去吧泡泡糖.zip

    少儿编程scratch项目源代码文件案例素材-去吧泡泡糖.zip

    KEPServerEX6-6.17.269.0

    KEPServerEX6-6.17.269.0,最新版

    scratch少儿编程逻辑思维游戏源码-第二个循环.zip

    scratch少儿编程逻辑思维游戏源码-第二个循环.zip

    少儿编程scratch项目源代码文件案例素材-手里剑.zip

    少儿编程scratch项目源代码文件案例素材-手里剑.zip

    少儿编程scratch项目源代码文件案例素材-山地跳跃.zip

    少儿编程scratch项目源代码文件案例素材-山地跳跃.zip

    机器人路径规划中Informed RRT*算法详解与代码实现

    内容概要:本文详细介绍了Informed RRT*算法及其在机器人路径规划领域的应用。文章首先解释了该算法相较于传统RRT*算法的优势,即通过将采样范围限制在由起点和终点构成的椭圆区域内来提高搜索效率。接着,文中提供了具体的代码实现,包括椭圆采样的核心公式、路径优化的rewire步骤以及动态调整邻居半径的方法。此外,还讨论了路径队列管理和椭圆区域随路径优化动态更新的重要性。通过这些技术手段,Informed RRT*能够在找到初始路径后显著加快优化速度。 适合人群:对机器人路径规划感兴趣的科研人员、工程师及学生。 使用场景及目标:适用于需要高效路径规划的实际应用场景,如自动驾驶汽车、无人机飞行路径规划等。目标是在复杂环境中快速找到从起点到终点的最佳路径。 其他说明:建议读者在理解理论的基础上,结合提供的代码进行实验,以便更好地掌握算法的工作机制。同时,在不同环境条件下测试算法性能,观察其自适应能力。

    基于COMSOL有限元仿真的变压器辐射传热数值分析:从入门到进阶

    内容概要:本文详细介绍了基于COMSOL有限元软件的变压器辐射传热数值分析方法。首先,解释了变压器内外辐射传热的基本机理,包括热量通过传导、对流和辐射的方式传递,重点在于辐射传热的作用及其数学描述。接着,逐步引导读者从零开始构建有限元仿真模型,涵盖模型参数确定、网格划分、材料属性定义、边界条件设置、传热方程设定、仿真运行及结果分析等多个步骤。最后,探讨了进一步研究的方向,如不同因素(温度、材料属性、几何形状)对辐射传热的影响,以及该模型在电力电子设备和热管理系统的潜在应用。 适合人群:电气工程专业学生、初学者和技术爱好者,尤其是对有限元仿真和变压器辐射传热感兴趣的群体。 使用场景及目标:适用于希望通过实际操作掌握有限元仿真技能的人群,旨在帮助他们理解变压器辐射传热机制并能独立完成相关仿真项目。 其他说明:本文不仅提供了理论知识,还附带了详细的视频教程和仿真模型,使学习过程更加直观易懂。

    scratch少儿编程逻辑思维游戏源码-Scratch 奔跑.zip

    scratch少儿编程逻辑思维游戏源码-Scratch 奔跑.zip

    scratch少儿编程逻辑思维游戏源码-超级马里奥兄 回放引擎.zip

    scratch少儿编程逻辑思维游戏源码-超级马里奥兄 回放引擎.zip

    少儿编程scratch项目源代码文件案例素材-你准备好了吗?.zip

    少儿编程scratch项目源代码文件案例素材-你准备好了吗?.zip

Global site tag (gtag.js) - Google Analytics