js 多线程的方式：web work

最新推荐文章于 2025-03-24 14:06:11 发布

qq_29854831

最新推荐文章于 2025-03-24 14:06:11 发布

阅读量2.5k

点赞数

分类专栏：前端文章标签： WebWork

前端专栏收录该内容

28 篇文章

订阅专栏

1.web work

W3S:https://www.w3schools.com/htmL/html5_webworkers.asp

WebWork 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

注意：dom是不能被异步操作的! WebWork不能在本地使用

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);
}

2.Concurrent.Thread.js

下载地址：http://download.youkuaiyun.com/download/include_define/796952

教程文档：http://www.cnblogs.com/0banana0/archive/2011/06/01/2067402.html