码迷,mamicode.com
首页 > 编程语言 > 详细

Web worker 多线程处理数据

时间:2014-09-19 18:54:25      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   使用   ar   strong   

流程:worker ------------àpostMessage----------------à任务沲----------------àpostMessage---------------à事件处理程序-------------------àonMessage------------------à返回信息.

bubuko.com,布布扣

bubuko.com,布布扣

bubuko.com,布布扣

写了一个成功的例子:(有两个文件,一个是主页文件 ,另一个是线程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 多线程处理数据

标签:style   blog   http   color   io   os   使用   ar   strong   

原文地址:http://www.cnblogs.com/hellome/p/3981869.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!