流程：worker ------------àpostMessage----------------à任务沲----------------àpostMessage---------------à事件处理程序-------------------àonMessage------------------à返回信息.
写了一个成功的例子：（有两个文件，一个是主页文件 ，另一个是线程js文件）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=‘utf-8‘>
5 <title>title</title>
6 <script>
7 window.onload=function(){
8
9
10 //创建一个线程对象
11
12 var worker=new Worker(‘work.js‘); //在线程中引用一个work.js文件
13
14
15 //获取Worker进程的返回值,可以通过onmessage属性绑定一个事件处理程序,
16 //当worker的postmessage()方法被调用时，这个被绑定的程序就会被触发
17
18 worker.onmessage=function(e){
19 //处理收到的消息
20 console.log(e.data); //该页面的onmessage方法是用来向页面处理数据的;
21
22 }
23
24 addEventListener(‘error‘,errorHandle,true); //当线程发生错误的时候触发该方法
25
26 document.querySelector(‘#btn‘).addEventListener(‘click‘,stopWorker,true); //绑定终止线程方法
27
28 //importScripts()函数加载js文件到Worker进程中去,例如加载 hello.js importScripts(‘hello.js‘);
29
30
31 worker.postMessage(‘hello WebWorker!‘);
32
36
37 /**** 事件处理函数 ****/
38
39 function errorHandle(e){
40 console.log(e.message,e);
41 }
42
43
44 function stopWorker(){
45 worker.terminate(); //终止线程方法
46 }
47
48
49
50
51 }
52 </script>
53 </head>
54 <body>
55 <button id=‘btn‘>dialog</button>
56 </body>
57 </html>
{2：线程文件}
1 //该事件用来监听线程中的postMessage事件 , 作用是用来接收线程的回送数据，
2 //并且把数据发回到web应用程序页面的onmessage监听处理数据事件
3
4 /*onmessage=function(e){
5
6 postMessage(e.data); //把线程中的数据发回到页面中去.
7
8 }*/
9
10
11
12 //第二种方法使用addEventListenner注册后台线程事件;
13
14 addEventListener(‘message‘,messageHandle,true);
15
16
17 function messageHandle(e){
18
19 postMessage(e.data);
20
21 }
时间： 2024-10-05 21:21:29