Html5 Web Workers-优快云博客

本文介绍如何使用WebWorkers在后台执行JavaScript任务，通过示例代码展示了如何创建Worker对象、传递参数并接收处理结果。

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

Web Workers 是运行在后台的 JavaScript线程，独立于其他脚本，不会影响到前端其他任何操作或体验。

主要过程包括：
1、创建Worker对象；
2、将参数值传递通过Worker对象的postMessage方法传递传递给后台线程脚本；
3、后台线程脚本处理后将结果通过postMessage方法返回；
4、原脚本通过监听onMessage事件获取后台线程传过来的值。

实例代码如下：

html页面：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5         <title>无标题文档</title>
 6         <script type="text/javascript" src="bb.js">
 7         </script>
 8     </head>
 9     <body>
10         输入数值：<input type="text" id="num"><input type="button" id="button" value="计算" />
11     </body>
12 </html>

bb.js代码：

 1 window.onload = function() {
 2     var worker = new Worker("sumCalculate.js");
 3     console.log(worker);
 4     var bbDom = document.getElementById("button");
 5     
 6     bbDom.addEventListener("click", f);
 7     
 8     function f(){
 9         var num = parseInt(document.getElementById("num").value);
10         worker.postMessage(num);
11     }
12 
13     worker.onmessage = function(event) {
14         alert(event.data);
15     }
16 }

后台线程sumCalculate.js代码：

1 onmessage = function(event) {
2     var result = event.data * 10;
3     postMessage(result);
4 }

---------------------------------------------------------------------------------
笔者水平有限，若有错漏，欢迎指正，如果转载以及CV操作，请务必注明出处，谢谢！

分类: Html | Css

本文转自Windstep博客园博客，原文链接：http://www.cnblogs.com/lwbqqyumidi/archive/2012/11/08/2761046.html，如需转载请自行联系原作者