love19820823

浏览: 974455 次

最近访客更多访客>>

shengwei729

morelily

gxlit

fangpeng123456789

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1393)

社区版块

存档分类

2011-12 ( 97)
2011-11 ( 33)
2011-10 ( 26)
更多存档...

HTML5之Worker用法

HTML5之Worker用法

HTML5提供了Worker类用于多线程处理。Worker是在UI主线程中创建，后台执行的一段js脚本，它通过消息与UI线程传递数据。使用Worker就3步：

cheungmine 2011-11-29

第1步：创建一个Worker，需要指定一个js文件，作为Worker线程的执行体：

var worker = new Worker("worker.js");

第2步：给Worker实例指定消息处理函数，只有2个：onmessage ，onerror
worker.onmessage = function (event) {
// update UI here
var t1 = new Date().getTime();
elemById("_time").value = t1 - t0;
elemById("_piValue").value = event.data;
};

worker.onerror = function (event) {
alert(event.message);
};

第3步：给worker发消息：postMessage。

elemById("_time").value = "-";
t0 = new Date().getTime();
worker.postMessage(parseInt(elemById("_num_rects").value));

下面以一个具体的例子来说明Worker的用法。这个例子是用数值积分的方法求pi=(3.1415926....）的。worker.js就是做这个工作。

HTML5主页面js-test.html如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js-test.html</title>
  <script type="text/javascript">
    function elemById(id) {
      return document.getElementById(id);
    }

var browser = getBrowserAgent();

var dt = new Date();
	var t0 = 0;

function initPage () {
      // onclick
      elemById("_piWorker").addEventListener('click',
        function(){
          var worker = new Worker("worker.js");
          worker.onmessage = function (event) {
            // update UI here
			var t1 = new Date().getTime();
			elemById("_time").value = t1 - t0;
            elemById("_piValue").value = event.data;
          };

worker.onerror = function (event) {  
            alert(event.message);  
          };

elemById("_time").value = "-";
		  t0 = new Date().getTime();
          worker.postMessage(parseInt(elemById("_num_rects").value));
        },
        false
      );
    }
  </script>
</head>
<body>
  <p>Press button "calc" to get pi</p>
  <p>
    <input type="input" size="10" id="_num_rects" value="100000000">
    <input type="button" id="_piWorker" value="calc">
    pi=<input type="input" size="30" id="_piValue" value="">
	time elapsed: <input type="input" size="10" id="_time" value="-">
  </p>
</body>
</html>

如果用户不小心用IE打开了主页面，我们需要提示用户目前IE还干不了这个活，下面的是下载支持HTML5的浏览器页面selbrowser.html：

好，全齐了。把上面3个文件放到同一个目录如：C:/myJSP/test下面：

test/js-test.html

test/worker.js

test/selbrowser.html

使用FireFox直接打开file:///C:/myJSP/test/js-test.html即可。目前FireFox8不支持http://localhost:8080/myJSP/test/js-test.html，会报Could not load domain错误。

但是FireFox Aurora支持，只是Worker计算速度超慢。

目前Chrome不支持Worker直接用file:///C:/myJSP/test/js-test.html方式打开，会报Uncaught Error: SECURITY_ERR: DOM Exception 18。

可以使用Chrome以http://localhost:8080/myJSP/test/js-test.html方式打开。需要建一个本地http server，如tomcat。

Opera两种方式都支持。

分享到：

HTML5之拖动图片 | HTTP认证方式

2011-11-29 12:10
浏览 621
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5之Worker用法

HTML5之Worker用法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5之Worker用法

HTML5之Worker用法

评论

发表评论

相关推荐

最近访客更多访客>>