或许你会将这有什么用呢？这里确实没什么用，这里我们大可以在主线程还总完成加“帅气！”的操作，因为他的复杂度为O(1)(哈哈，最近在学算法！)，但是假如不是做这么简单的操作呢？这种方法的好处就是不过你的子线程做多么复杂的工作，都不会让主线程停下来，主线程改干嘛还干嘛，等到子线程把数据处理好了他直接拿过来就好了。
陆老师将可以在子线程中在调用new Worker()创建新的子线程，我发现这样是不可以的，会报undefined错误，也就是说子线程中是不能调用Worker构造函数的，一开始以为是自己错了，后来查阅了官方文档，发现也没有相关的描述。
下面看一个在主线程调用多个子线程的例子：
| //main.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>main</title> </head> <body> <div id="out"></div> <input type="text" name="" id="txt"> <button id="btn">发送</button> <script type="text/javascript"> 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); </script> </body> </html> //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 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>main</title> </head> <body> <div id="out"></div> <input type="text" name="" id="txt"> <button id="btn">发送</button> <script type="text/javascript"> var out = document.getElementById("out"); var btn = document.getElementById("btn"); var txt = document.getElementById("txt"); var worker1 = new Worker("thread1.js"); btn.addEventListener("click",function(){ var postData = txt.value; worker1.postMessage(postData); },false); worker1.addEventListener('message',function(e){ out.innerText = e.data; },false); </script> </body> </html> //thread1.js importScripts('tools.js') onmessage = function(event){ var res = handler(event.data); postMessage(res); } //tools.js function handler(data){ return data+"加油加油！" } |
