Web Workers處理多線程 - 多子線程中進行數據交互

最新推荐文章于 2022-09-09 18:00:41 发布

lulu_jiang

最新推荐文章于 2022-09-09 18:00:41 发布

阅读量1.4k

点赞数

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

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

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Workers.html

<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <!-- 多子線程中進行數據交互 -->
        <table id="table"></table>
        <script type="text/javascript">
            var worker = new Worker("workers1.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>

workers1.js

onmessage = function (event) {
    var worker;
    //創建發送數據的子線程
    worker = new Worker("workers2.js");
    worker.postMessage("");
    worker.onmessage = function (event) {
        //接收子線程中數據，本例為創建好的隨機數組
        var data = event.data;
        //創建接收數據子線程
        worker = new Worker("workers3.js");
        //把從發送數據的子線程中發回的消息傳遞給接收數據的子線程
        worker.postMessage(data);

        worker.onmessage = function (event) {
            //獲取接收數據的子線程中傳回的數據，本例中為篩選的結果
            var data = event.data;
            //將結果發送回主頁面
            postMessage(data);
        }
    }
};

workers2.js

onmessage = function (event) {
    var intArray = new Array(100);
    for (var i = 0; i < 100; i++) {
        intArray[i] = parseInt(Math.random() * 100);
    }
    //發送隨機數組
    postMessage(JSON.stringify(intArray));
    //關閉子線程
    close();
};

workers3.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

收藏

觉得还不错? 一键收藏
0
评论
Web Workers處理多線程 - 多子線程中進行數據交互

Workers.html var worker = new Worker("workers1.js"); worker.postMessage(""); worker.onmessage = fun
复制链接

扫一扫