zoukankan      html  css  js  c++  java
  • 【转】《高级前端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          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 {
             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);
    }

    如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!
  • 相关阅读:
    应该选取表中哪些字段作为索引?
    maven聚合(依赖聚合)
    maven(1)
    maven打包记录1
    tomcat 日志(2)
    tomcat日志(1)
    存储过程
    EXISTS的用法介绍
    学习笔记-移动设备的处理器指令集 armv6 armv7 armv7s arm64
    学习笔记-nil NULL NSNull Nil的区别
  • 原文地址:https://www.cnblogs.com/xuanbiyijue/p/7815585.html
Copyright © 2011-2022 走看看