第10章 使用Web Workers处理线程HTML5与CSS3 Web前端开发技术-PPT课件.ppt

第10章 使用Web Workers处理线程(HTML5与CSS3 Web前端开发技术)
Web Workers概述
1. Web Workers的引入
表10-1 Web Workers API中常用的方法事件
方法/事件
功能
Worker()方法
构造器，用于创建线程
postMessage()方法
用于发送信息
terminate()方法
终止线程，并释放浏览器/计算机资源
close()方法
结束线程
setTimeout()方法
在线程中实现定时处理
setInterval ()方法
在线程中实现定时处理
onmessage事件
获得接收消息的事件句柄
Web Workers概述
2. 使用Web Workers创立线程
〔1〕创立线程的方法
创立后台线程的步骤十分简单。只要在Worker类的构造器中，将需要在后台线程中执行的脚本文件的URL地址作为参数，然后创立Worker对象就可以了，代码如下。
var worker=new Worker("");
〔2〕传递数据
通过发送和接收消息来实现前面页面与后台线程互相传递数据。接收消息的方法有2种。
Web Workers概述
通过获取Worker对象的onmessage事件的句柄可以在后台线程中接收消息。
=function(event) {
//消息处理，数据为
}
使用addEventListener()方法监听message事件。
("message",function(event) {
//(‘message’).innerHTML= ;
//消息处理，数据为
},false);
如果想要发送消息， 需要使用postMessage()方法。
Web Workers概述
2. 使用Web Workers创立线程
〔3〕创立Web Workers线程的一个例子
页面与线程数据的交互

("Mary")语句，向后台线程发送数据；后台线程接收数据后，("Hello "+)语句将数据发送至前端页面；由前端页面在一个output元素中显示。
页面与线程数据的交互
2. 前台页面向后台传送JSON数据
JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，适合于效劳器与 JavaScript 的交互。JSON数据描述以“{〞开始，以 “}〞结束，JSON中的多个元素需要用逗号分开。
在Web Worker线程应用时，发送数据时，可以使用下面的代码：
({name:"Rose",age:22，address: "Shai"});