首页 > 代码库 > Web worker 多线程处理数据

Web worker 多线程处理数据

2024-07-23 10:23:25   211人阅读

流程：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     }

 

Web worker 多线程处理数据


联系
我们