《高级前端3.6》JavaScript多线程——Concurrent.Thread.js, WebWork
Posted 悬笔e绝
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《高级前端3.6》JavaScript多线程——Concurrent.Thread.js, WebWork相关的知识，希望对你有一定的参考价值。
原文链接：http://www.cnblogs.com/woodk/articles/5199536.html
javascript多线程，在HTML5 WebWork没出现之前很多人都是用ConcurrentThread.js模拟多线程。
通常，我们也会用setInterval和setTimeout来模拟多线程。
多线程的概念介绍
浏览器事件触发线程，ajax，setTimeout，setInterval都会被放入最后面的一个程序池。
Concurrent.Thread.js
Concurrent.Thread.js是一个日本人开发的，用来让javascript也进行多线程开发的包，可以让我们将耗时的任务利用前端来模拟多线程。
下载地址：http://download.csdn.net/download/include_define/796952
教程文档：http://www.cnblogs.com/0banana0/archive/2011/06/01/2067402.html
下面我们试一下：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>JavaScript多线程</title>
7 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
8 <script type="text/javascript" src="Concurrent.Thread.js"></script>
9 <style type="text/css">
10 div {
11 width: 100px;
12 height: 100px;
13 cursor: pointer;
14 background: orange;
15 }
16 </style>
17 </head>
18
19 <body>
20 <div id="test">
21 测试点击
22 </div>
23 <script type="text/javascript">
24 Concurrent.Thread.create(function() {
25 $(\'#test\').click(function() {
26 alert(1);
27 });
28 /*下面有一段特别复杂的函数*/
29 for (var i = 0; i < 10000; i++) {
30 console.log(i);
31 }
32 });
33 </script>
34 </body>
35
36 </html>
可以发现，div能在打印i的时候正常响应了，非常牛掰的一个库~~
WebWork
WebWork 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
注意：dom是不能被异步操作的! WebWork不能在本地使用
HTML5之WebWork使用方法：http://www.cnblogs.com/yxlblogs/p/3896786.html
webwork.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript多线程</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
div {
width: 100px;
height: 100px;
cursor: pointer;
background: orange;
}
</style>
</head>
<body>
<div id="test">
测试点击
</div>
<script type="text/javascript">
$(\'#test\').click(function() {
alert(1);
});
var worker = new Worker("task.js");
worker.onmessage = function(event) {
// 消息文本放置在data属性中，
// oBox.innerHTML = event.data;
alert(event.data);
}
worker.postMessage(500000);
</script>
</body>
</html>
task.js
onmessage = function(event) {
var num = event.data;
var result = 0;
for (var i = 0; i < num; i++) {
result += i;
console.log(result);
}
// 向线程创建源送回消息
postMessage(result);
}
如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！
以上是关于《高级前端3.6》JavaScript多线程——Concurrent.Thread.js, WebWork的主要内容，如果未能解决你的问题，请参考以下文章
神策数据内推--前端架构师高级前端开发工程师 -- 多Base