HTML5新特性中多线程的示例分析-创新互联

这篇文章给大家分享的是有关HTML5新特性中多线程的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的松桃网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

一、Worker类

1、方法介绍

（1）构造函数 new Worker(arg) :参数表示你的线程要执行的代码所在的js文件，例如‘myworker.js’,构造函数当然是返回一个Worker类的实例

（2）worker.postMessage(message):这个方法表示从主线程向子线程发送消息或者子线程向主线程发送消息，message一般是一个字符串，也可以将一个js对象转成字符串发过去

（3）worker上还有一个message事件，当有人向这个worker实例发送消息时，该事件被触发，我们可以从他的事件对象的data属性中获得post过来的值

可以看到Woker类的API是相当简洁的，只有两个最常用的方法，一个事件，下面我们来通过实际的例子看看。

//main.html




    
    main

发送 var out = document.getElementById("out"); var btn = document.getElementById("btn"); var txt = document.getElementById("txt"); var worker = new Worker("thread1.js"); btn.addEventListener("click",function(){ var postData = txt.value; worker.postMessage(postData); },false); worker.addEventListener('message',function(e){ out.innerText = e.data; },false); //thread1.js onmessage = function(event){ var res = event.data+"帅气！"; postMessage(res); }

当我在文本框输入“大～熊”点击发送按钮就会出现如下效果

HTML5新特性中多线程的示例分析

简单分析分析，我在主线程由thead1.js创建了一个Worker的实例worker，当点击按钮时会调用他的postMessage方法，将文本框中的内容发送到thread1.js，我们的thread1.js怎么做的呢？是这样，他侦听message事件，主线程发送消息过来就触发这个事件，执行回调函数，回调函数从事件对象取得发送来的值，然后将这个值加上“帅气！”,然后在发送回去。主线程呢也侦听了worker的message事件，所以有消息过去时会触发，将消息内容显示在div中，如此就看到了上面的效果。

或许你会将这有什么用呢？这里确实没什么用，这里我们大可以在主线程还总完成加“帅气！”的操作，因为他的复杂度为O(1)(哈哈，最近在学算法！)，但是假如不是做这么简单的操作呢？这种方法的好处就是不过你的子线程做多么复杂的工作，都不会让主线程停下来，主线程改干嘛还干嘛，等到子线程把数据处理好了他直接拿过来就好了。

陆老师将可以在子线程中在调用new Worker()创建新的子线程，我发现这样是不可以的，会报undefined错误，也就是说子线程中是不能调用Worker构造函数的，一开始以为是自己错了，后来查阅了官方文档，发现也没有相关的描述。

下面看一个在主线程调用多个子线程的例子：

//main.html



    
    main

发送 var out = document.getElementById("out"); var btn = document.getElementById("btn"); var txt = document.getElementById("txt"); var worker1 = new Worker("thread1.js"); var worker2 = new Worker("thread2.js"); btn.addEventListener("click",function(){ var postData = txt.value; worker1.postMessage(postData); },false); worker1.addEventListener('message',function(e){ worker2.postMessage(e.data); },false); worker2.addEventListener('message',function(e){ out.innerText = e.data; },false); //thread1.js onmessage = function(event){ var res = event.data+"帅气！"; postMessage(res); } //thread2.js onmessage = function(event){ var res = event.data+"没骗你哟！"; postMessage(res); close(); }

主线程要完成一个任务需要两个线程，它创建了两个线程worker1,2,先向worker1请求，得到返回的数据后，再请求worker2,同时将worker1处理之后的数据交给worder2处理，然后拿到最终结果，显示在页面上。

在子线程中可以引入其他的js文件然后调用，比如下边这个例子。

//main.html



    
    main

//main.html Shared workers: demo 1 //shared.js onconnect = function(e) { var port = e.ports[0]; port.postMessage('Hello World!'); }

Shared workers: demo 2 　　 //shared onconnect = function(e) { var port = e.ports[0]; port.postMessage('Hello World!'); port.onmessage = function(e) { port.postMessage('pong'); // not e.ports[0].postMessage! // e.target.postMessage('pong'); would work also } }

//main1 和main2都是这样 Shared workers: demo 2 get set //shared var data; onconnect = function(e) { var port = e.ports[0]; port.onmessage = function(e) { if(e.data=='get'){ port.postMessage(data); }else{ data=e.data; } } }

定制建站费用3500元

品牌网站建设费用6000元

商城网站建设费用8000元

手机微信网站建站3000元

建站知识

HTML5新特性中多线程的示例分析-创新互联

其他资讯