`
Rainbow702
  • 浏览: 1076007 次
  • 性别: 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的...

    详解VC++模态对话框和非模态对话框

    由于非模态对话框不是由`DoModal`函数控制的,因此在对话框创建后,其对象可能会在其创建的函数执行完毕后被销毁,导致对话框消失。为了避免这种情况,非模态对话框对象应作为类成员变量或在堆上分配内存。对于后者...

    vc的模态对话框和非模态对话框

    ### VC的模态对话框和非模态对话框详解 #### 概述 在Visual C++(VC)中,模态对话框与非模态对话框是两种常见的对话框类型,它们各自具备独特的特性和用途。理解这两种对话框的区别对于开发用户友好的应用程序至...

    模态对话框与非模态对话框程序Java示例

    模态对话框适用于需要用户集中注意力解决单一问题的情况,而非模态对话框则适合于不打断用户工作流程的多任务处理。通过JOptionPane和JDialog类,开发者可以方便地在Java应用程序中实现这两种对话框。在实际项目中,...

    MFC模态 非模态对话框 ARX2008+VS2005

    结合Visual Studio 2005(VS2005)的Microsoft Foundation Classes (MFC),我们可以构建强大的用户界面,其中包括模态和非模态对话框。下面将详细解释这两个概念以及如何在ARX2008+VS2005环境下实现它们。 1. **...

    VC中模态对话框和非模态对话框的编程

    ### VC中模态对话框和非模态对话框的编程 #### 一、概述 对话框(Dialog)作为Windows应用程序中频繁使用的元素之一,主要用于接收用户的输入信息。在MFC框架下,对话框的功能被封装在`CDialog`类中,这是一个从`...

    qml自定义模态对话框

    在QML(Qt Quick)中,自定义模态对话框是一种常见的需求,它允许开发者创建具有独特设计和功能的交互式界面元素。不同于标准的`Popup`组件,自定义模态对话框通常需要更高的定制性,以满足特定的用户体验或项目需求...

    mfc中模态、非模态对话框与主对话框之间的数据交换

    点击运行弹出一个对话框,点击DIALOG1按钮弹出一个模态对话框,在该对话框的编辑框输入文本点击确定该对话框消失且输入的文本被显示到主对话框MainDialog中,点击DAILOG2按钮弹出一个非模态对话框,操作现象和模态...

    MFC模态对话框和非模态对话框

    在Windows应用程序开发中,Microsoft Foundation Class (MFC)库提供了一种高效且便捷的方式来创建用户界面,其中包括模态对话框和非模态对话框。这两种对话框在不同的场景下各有其用途,理解它们的工作原理和使用...

    模态对话框和非模态对话框创建和使用VS2010/MFC

    在Microsoft Visual Studio 2010 (VS2010) 中,MFC(Microsoft Foundation Classes)库提供了创建和管理用户界面元素的功能,其中包括模态对话框和非模态对话框。这两种对话框在Windows应用程序开发中扮演着重要的...

    一个简单模态对话框实例

    适度地使用模态对话框可以提高用户交互的清晰度,但过度使用则可能导致用户感到困扰,甚至对应用程序产生反感。因此,设计师和开发者需要权衡其必要性和用户的需求,合理地在应用中插入模态对话框。 总的来说,模态...

    vc非模态对话框例子

    非模态对话框与模态对话框不同,在非模态对话框活动的同时,用户还可以在应用程序的其他地方工作,而模态对话框在其关闭之前,用户不能在同一个应用程序的其他地方工作。本例将从主框架窗口创建一个简单的非模态...

    子模态对话框关闭后刷新父模态对话框

    本话题关注的是如何在关闭子模态对话框后刷新其父模态对话框,这是一个典型的前端开发问题,主要涉及到JavaScript和可能的框架如jQuery、React、Vue或Angular等。 首先,我们需要理解模态对话框的工作原理。模态...

    MFC模态对话框与非模态对话框

    MFC中经常会用到弹出模态或非模态对话框,模态对话框与非模态对话框容易混淆

    Visual C++模态对话框消息处理机制的分析

    在模态对话框处于活动状态期间,应用程序只能处理与该模态对话框相关的消息,其他的消息将被阻塞,直到模态对话框关闭。 消息队列是Windows程序中一个非常重要的概念,它用于存放各种窗口的消息。每个应用程序都有...

    android 模态与非模态对话框实现

    在Android应用开发中,对话框(Dialog)是与用户交互的重要元素,分为模态和非模态两种类型。本文将详细介绍这两种对话框的实现,并结合源码和工具进行讲解。 模态对话框(Modal Dialog)是一种阻塞用户界面直至...

    创建非模态对话框

    ### 创建非模态对话框 在Windows编程中,对话框是一种常见的用户界面元素,用于向用户提供信息或收集用户的输入。对话框通常分为两种类型:模态对话框和非模态对话框。模态对话框会阻止用户与应用程序的其他部分...

    VS2010模态非模态对话框.rar

    对话框可以分为两种类型:模态对话框(Modal Dialog)和非模态对话框(Modeless Dialog)。本教程将详细介绍如何在MFC(Microsoft Foundation Classes)环境中创建这两种对话框,以及如何在它们之间传递数据。 首先...

    IOS 弹出模拟模态对话框

    在iOS开发中,模态对话框(Modal Dialog)是一种常见的用户交互方式,它可以在当前界面之上弹出一个半透明或不透明的视图,用于显示临时信息、进行关键操作或者像描述中提到的那样,创建登录界面。Xcode 6是苹果提供...

Global site tag (gtag.js) - Google Analytics