Web Workers處理多線程

来源：互联网发布：u盘centos 7安装教程编辑：程序博客网时间：2024/05/16 09:20

主體頁面：

<!DOCTYPE html /><html>    <head>        <meta charset="utf-8" />    </head>    <body>        <!--        Web Workers：        HTML5中新增，用來實現Web平臺上多線程處理功能        Web Workers可創建一個不會影響前臺處理的後臺線程，並且在這個後臺線程中創建多個子線程        將可能耗費較長時間的處理交給後臺去執行，對用戶前臺頁面中執行的操作就沒有影響啦        Web Workers API：        使用這個API用戶可以很容易的創建後臺線程(HTML5中被稱為worker)        var worker = new Worker("worker.js");        參數為需要在後臺線程中執行的腳本文件的URL地址        注意：後臺線程中不能訪問頁面或窗口對象(document,window)        可通過發送和接收消息與後臺線程互相傳遞數據，通過Worker對象的onmessage事件句柄的獲取，可接收消息        worker.onmessage = function(event){            //處理收到的消息        };        使用Worker對象的postMessage方法對後臺線程發送消息(可為文本數據，JSON對象(需用stringify方法轉換為文本))        線程嵌套：        線程中可以嵌套子線程        -->        <div>            輸入值：<input type="text" id="num" />            <button onclick="sum()">計算</button>        </div>        <script type="text/javascript">            //如果用戶輸入較大值100億，將導致瀏覽器彈出提示腳本運行時間過長，不得不停止當前計算//            function calculate() {//                var num = parseInt(document.getElementById("num").value, 10);//                var result = 0;//                for (var i = 0; i <= num; i++) {//                    result += i;//                }//                alert("合計值為：" + result);//            };            //創建執行運算的線程            var worker = new Worker("calculate.js");            //接收從線程中傳來的計算結果            worker.onmessage = function (event) {                alert("合計值為：" + event.data);            };            function sum() {                var num = parseInt(document.getElementById("num").value, 10);                //將數值傳給後臺線程計算                worker.postMessage(num);            };        </script>        <table id="table"></table>        <script type="text/javascript">            var intArray = new Array(100);            var intStr = "";            for (var i = 0; i < 100; i++) {                intArray[i] = parseInt(Math.random() * 100);                if (i != 0) {                    intStr += ";";                }                intStr += intArray[i];            }            var worker2 = new Worker("script.js");            worker2.postMessage(intStr);            worker2.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>

calculate.js

onmessage = function (event) {    var num = event.data;    var result = 0;    for (var i = 0; i <= num; i++) {        result += i;    }    //向線程創建源發送消息    postMessage(result);};

script.js

onmessage = function (event) {    var data = event.data;    var returnStr = "";    var intArray = data.split(";");    //篩選3的倍數    for (var i = 0; i < intArray.length; i++) {        if (parseInt(intArray[i]) % 3 == 0) {            if (returnStr != "") {                returnStr += ";";            }            returnStr += intArray[i];        }    }    //向線程創建源發送消息    postMessage(returnStr);};