【转】《高级前端3.6》JavaScript多线程——Concurrent.Thread.js, WebWork

最新推荐文章于 2024-04-22 09:49:15 发布

weixin_30248399

最新推荐文章于 2024-04-22 09:49:15 发布

阅读量113

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/xuanbiyijue/p/7815585.html

版权

原文链接：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);
}

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！

转载于:https://www.cnblogs.com/xuanbiyijue/p/7815585.html

weixin_30248399

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【转】《高级前端3.6》JavaScript多线程——Concurrent.Thread.js, WebWork

原文链接：http://www.cnblogs.com/woodk/articles/5199536.htmlJavaScript多线程，在HTML5WebWork没出现之前很多人都是用ConcurrentThread.js模拟多线程。通常，我们也会用setInterval和setTimeout来模拟多线程。多线程的概念介绍浏览器事件触发线程，ajax，se...
复制链接

扫一扫