Web Workers處理多線程 - 線程單層嵌套

最新推荐文章于 2024-04-18 14:44:08 发布

lulu_jiang

最新推荐文章于 2024-04-18 14:44:08 发布

阅读量1.1k

点赞数

分类专栏： HTML5 文章标签： web function table html

本文链接：https://blog.csdn.net/lulu_jiang/article/details/7784596

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

主體頁面：

<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <!-- 單層嵌套 -->
        <table id="table"></table>
        <script type="text/javascript">
            var worker = new Worker("worker1.js");
            worker.postMessage("");
            worker.onmessage = function (event) {
                if (event.data != "") {
                    var j;
                    var k;
                    var tr;
                    var td;
                    var intArray = event.data.split(";");
                    var table = document.getElementById("table");
                    for (var i = 0; i < intArray.length; i++) {
                        j = parseInt(i / 10, 0);
                        k = i % 10;

                        if (k == 0) {
                            tr = document.createElement("tr");
                            tr.id = "tr" + j;
                            table.appendChild(tr);
                        }
                        else {
                            tr = document.getElementById("tr" + j);
                        }

                        td = document.createElement("td");
                        tr.appendChild(td);
                        td.innerHTML = intArray[j * 10 + k];
                        td.style.backgroundColor = "blue";
                        td.style.color = "white";
                        td.width = "30";
                    }
                }
            };
        </script>
    </body>
</html>

worker1.js

onmessage = function (event) {
    var intArray = new Array(100);
    for (var i = 0; i < 100; i++) {
        intArray[i] = parseInt(Math.random() * 100);
    }

    var worker = new Worker("worker2.js");
    //將隨機數提交給子線程進行挑選
    worker.postMessage(JSON.stringify(intArray));
    worker.onmessage = function (event) {
        //向線程創建源發送消息
        postMessage(event.data);
        //關閉子線程
        close();
    }
};

worker2.js

onmessage = function (event) {
    var returnStr = "";
    var intArray = JSON.parse(event.data);

    //篩選出3的倍數
    for (var i = 0; i < intArray.length; i++) {
        if (parseInt(intArray[i]) % 3 == 0) {
            if (returnStr != "") {
                returnStr += ";";
            }

            returnStr += intArray[i];
        }
    }

    //向線程創建源發送消息
    postMessage(returnStr);
    //關閉子線程
    close();
};

lulu_jiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web Workers處理多線程 - 線程單層嵌套

主體頁面： var worker = new Worker("worker1.js"); worker.postMessage(""); worker.onmessage = function (e
复制链接

扫一扫

专栏目录