Web Worker javascript多线程编程（一） - PeakLeo(2)_H5之家

addEventListener("message", function(evt){ var xhr = new XMLHttpRequest(); xhr.open("GET", "serviceUrl"); //serviceUrl为后端j返回son数据的接口 xhr.onload = function(){ postMessage(xhr.responseText); }; xhr.send(); },false);

上述举例的代码有些简陋，只是为了抛砖引玉，见谅。其他API与Web Worker的融合使用也是大同小异，大家可以自己琢磨琢磨。

终止 web worker

如果你想立即终止一个运行中的 worker，可以调用 worker 的terminate()方法。被终止的Worker对象不能被重启或重用，我们只能新建另一个Worker实例来执行新的任务。

myWorker.terminate();

处理错误

当 worker 出现运行时错误时，它的onerror事件处理函数会被调用。它会收到一个实现了ErrorEvent接口名为error的事件，供开发者捕捉错误信息。下面的代码展示了如何绑定error事件：

worker.addEventListener("error", function(evt){ alert("Line #" + evt.lineno + " - " + evt.message + " in " + evt.filename); }, false);

如上可见， Worker对象可以绑定error事件；而且evt对象中包含错误所在的代码文件（evt.filename）、错误所在的代码行数（evt.lineno）、以及错误信息（evt.message）。

下面上一个完整的dedicated web worker 使用案例。

demo_worker.html

dedicated web workerCount numbers: startWorkerstopWorker (function () { ), startWorker ), endWorker ), worker, data = 10; startWorker.addEventListener() { ) { worker ); } worker.addEventListener( event.data; }, false); worker.addEventListener( (event) { alert( event.filename); }, false); worker.postMessage(data); endWorker.addEventListener( () { worker.terminate(); }, false); } else { result.innerHTML ; } }, false); })();

这个HTML页面中有个startWorker按钮，点击后会运行一个Javascript文件。上面的代码中首先检测当前浏览器是否支持Web Worker，不支持的话就显示提醒信息。

按钮的点击事件中创建了Worker对象，并给它指定了Javascript脚本文件——demo_workers.js(稍后会有代码)，并且给Worker对象绑定了一个“message”事件。该事件会在后台代码（demo_workers.js）向页面返回数据时触发。“message”事件可以通过event.data来获取后台代码传回的数据。最后，postMessage方法正式执行demo_workers.js，该方法向后台代码传递参数，后台代码同样通过message事件参数的data属性获取。

demo_worker.js

count = event.data; var interval = setInterval(function () { postMessage(count--);!count && clearInterval(interval); },1000); });

以上代码在后台监听message事件，并获取页面传来的参数；这里实际上是一个从10到1的倒计时：在message事件被触发之后，把结果传给页面显示出来。

所以当点击startWorker按钮，页面会在count number: 显示从10递减一变为最终的1，在这10秒钟内页面依然可以响应鼠标键盘事件。点击stopWorker按钮，web worker 会直接终止，页面变化显示会直接停止。

嵌入式web worker

MDN Example - Embedded worker; pageLog (sMsg) { document.createDocumentFragment(); oFragm.appendChild(document.createTextNode(sMsg)); oFragm.appendChild(document.createElement()); document.querySelector().appendChild(oFragm); } (oEvent) { postMessage(myVar); }; }); Worker(window.URL.createObjectURL(blob)); document.worker.onmessage = function (oEvent) { pageLog( oEvent.data); }; ); };

现在，嵌入式 worker 已经嵌套进了一个自定义的 document.worker 属性中。

在 worker 内创建 worker

worker 的一个优势在于能够执行处理器密集型的运算而不会阻塞 UI 线程。在下面的例子中，worker 用于计算斐波那契数。

fibonacci.js