HTML 5 Web Workers

最新推荐文章于 2024-05-10 11:11:57 发布

c1063891514

最新推荐文章于 2024-05-10 11:11:57 发布

阅读量284

点赞数

分类专栏： Linux基础，

本文链接：https://blog.csdn.net/c1063891514/article/details/79298204

版权

Linux基础，专栏收录该内容

22 篇文章 0 订阅

订阅专栏

web worker 是运行在后台的 JavaScript，不会影响页面的性能

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。

WEB主线程:1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。2.通过worker.postMessage( data ) 方法来向worker发送数据。3.绑定worker.onmessage方法来接收worker发送过来的数据。4.可以使用 worker.terminate() 来终止一个worker的执行。

worker新线程：1.通过postMessage( data ) 方法来向主线程发送数据。2.绑定onmessage方法来接收主线程发送过来的数据。

html文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>	
<HEAD>	
	
<!-- 请设置页面标题-->		
<title>WEB-API test case unit4Dir</title>	
<meta http-equiv=Content-Type content="text/html; charset=gb2312">		
<!-- <meta name="page-view-size" content="1280*720"> -->	
<!-- //link标签用于引用功能目录/common_css下的dir.css文件，请修改href的引用路径 -->
<link rel="stylesheet" type="text/css" href="../common_css/dir.css">	
<!-- 若还有其他css文件请在这里引用 -->
<!--<link rel="stylesheet" type="text/css" href="#">-->

<!-- javascript脚本，请尽量编写在下面的script标签中 -->	
<script  charset="gb2312" type="text/javascript" src="../lib_js/dvbPublic.js"></script>
<script  charset="gb2312" type="text/javascript" src="../lib_js/ngbEvent.js"></script>
<script  charset="gb2312" type="text/javascript" src="../lib_js/ngbPathString.js"></script>
<script  charset="gb2312" type="text/javascript" src="lib_js/SmartHome_04.js"></script>

<SCRIPT LANGUAGE="JavaScript">
//这里处理翻页键

document.onkeydown = grabEvent_h;
document.onsystemevent = grabEvent_h;

function grabEvent_h(){
	grabEvent();
}
function broadcast_case()
{
	//setTimeout("XXXXX()",100);
	test();
	return;	  
}

</SCRIPT>
</HEAD>

<BODY οnlοad="broadcast_case()">	
	<div class="css_jiaobiao">用例编号:</div>	
	<div class="css_title"> caseSmartHome_04</div>
	<table class="css_tablebody" cellspacing=0 cellpadding=4>	
		<tr>
			<td width=112 valign='top'>测试内容:</td>					
			<td>
				SmartHome.broadcast(int packetInterval, int groupInterval)：<br>
				通过广播方式发送wifi配置信息。<br>
				packetInterval - number型。信息包的时间间隔。
				groupInterval - number型。信息包组的时间间隔
			</td>
		</tr>
		
		<tr>
			<td  valign='top'>前置条件:</td>					
			<td>无</td>
		</tr>
		<tr>
			<td  valign='top'>测试步骤:</td>					
			<td>点击"XXXXXXXXXX"按钮<br>
				
			</td>
		</tr>
		<tr>
			<td  valign='top'>预期结果: </td>				
			<td>			
				返回：0 : 表示成功。 非0 : 表示失败。			</td>
		</tr>
	</table>
	
	<hr size=3 color='#747474' width="99%" align=left>
	<input type=button value="广播发送wifi配置信息" οnclick="broadcast_case()"> 


		<div id=result class="css_div_body"></div>	

	<hr size=3 color='#747474' width="99%" align=left>
	<table class="css_tablebody" cellspacing=0 cellpadding=0>
		<tr>			
			<td height=30 width="35%">		
				<a href="caseSmartHome_03.html">prev-case</a>	  	
				<a href="caseSmartHome_05.html">next-case</a>				
			</td>
			<td width="65%" align=right>				
				<!--//return 即 "返回上级"页面，请改为实际链接地址路径 -->
				<a href="unit16_index.html">return</a>  【PageUp】【PageDown】键可翻页 
			</td>
		</tr>	
	</table>
</BODY>
</HTML>

js文件

var str="";

function grabEvent(){
	var val = event.which;
	switch (val) {
		case EVENT_KEY_PAGEUP:  //page up
			window.location.href=U16_SmartHome_03_index_Dir_URL;//上一个页面，如果没有上一个页面请注释掉
			break;
		case EVENT_KEY_PAGEDOWN:  //page down
			window.location.href=U16_SmartHome_05_index_Dir_URL;//下一个页面，如果没有下一个页面请注释掉
			break;
		case EVENT_KEY_EXIT:
		case EVENT_KEY_BACK:		
			window.location.href = U16_SmartHome_Channel_PATH_URL;
			break;	
		//处理需要的按键或消息
	}
}


function test()
{	

/*
	var worker = new Worker("demoTest.js");
	//worker.addEventListener("message", function(e){  alert("gfd");}, false);
	alert("fdgs");
	worker.onmessage=function(event){alert("fdgs");}

*/
	var w;

	w=new Worker("./lib_js/demoTest.js");
	

	w.onmessage=function(event){ alert("onmessage");alert(event.data);}
   worker.postMessage("hello world");     //向worker发送数据
	str+="  XXXXXXXXX "+typeof(w)+"....<br>";
	 
    $("result").innerHTML=str;
	
}

demoTest.js

function fun(){
	

	postMessage("rtr");
	str+="  ֹͣhgjhk...<br>";
	 
    $("result").innerHTML=str;

}

onmessage =function (evt){
var d = evt.data;//通过evt.data获得发送来的数据
postMessage( d );//将获取到的数据发送会主线程
}fun();

c1063891514

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 5 Web Workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新...
复制链接

扫一扫

专栏目录