Web worker 多线程处理数据
流程：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 }
