js Worker 線程收集1~9999的之間全部質數；Worker線程交換數據；多個線程嵌套

時間 2020-06-06

標籤 worker 線程收集之間全部質數交換數據多個嵌套欄目 JavaScript 简体版

原文原文鏈接

在平時的運行的javascript腳本都在主線程中執行，若是當前腳本包含複雜的、耗時的代碼。那麼JavaScript腳本的執行將會被阻塞，甚至整個劉看齊都是提示失去響應。
例子：
假設程序須要計算、收集1~9999的之間全部質數，不採用後臺線程，而是之間是使用JavaScript前臺線程的計算、收集質數。代碼以下。javascript

<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 計算質數 </title>
</head>
<body>
    <p>已經發現的全部質數：<div id="result"></div></p>
    <script type="text/javascript">
        var n = 1;
        search: 
        while (n < 99999) 
        {
            // 開始搜尋下一個質數
            n += 1;
            for (var i = 2; i <= Math.sqrt(n); i++)
            {
                // 若是除以n的餘數爲0，開始判斷下一個數字。
                if (n % i == 0)
                {
                    continue search;
                }
            }
            document.getElementById('result').innerHTML += (n + ", ");
        }
    </script>
</body>
</html>

瀏覽器久久未響應，一篇空白。最後過來七八秒所有崩出來。若是改成使用webWorker啓用多線程呢？使用Worker建立賢臣很是簡單，只要調用Worker的構造器就能夠。html

<head>
    <title></title>
    <script>
        var worker = new Worker('worker12.js');
        worker.onmessage = function (event) {
            document.getElementById("result").innerHTML += event.data + ",";
        }

    </script>
</head>
<body>
    <p>
        已經發現的全部質數：<div id="result" style="width: 1500px; height:auto; border:1px solid red; word-wrap: break-word; ">
        </div>
    </p>
</body>
</html>

Worker.jsjava

var n = 1;
search:
while (n < 10000) {
    // 開始搜尋下一個質數
    n += 1;
    for (var i = 2; i <= Math.sqrt(n); i++) {
        // 若是除以n的餘數爲0，開始判斷下一個數字。
        if (n % i == 0) {
            continue search;
        }
    }
    // 發現質數
    postMessage(n);
}

注意：
Worker啓動的子線程找到質數以後，並不能之間把找到的質數更新在頁面上顯示，必須經過postMessage(n)發送消息給前臺JavaScript通訊。
例子2：Worker線程交換數據：web

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>多個線程交換數據</title>
    <script>
        var car = function () {
            var start = document.getElementById("start1").value;
            var end = document.getElementById("end1").value;

            if (start >= end) {
                return;

            } else {

                var cal = new Worker("Worker.js");
                // 定義須要提交給Worker線程的數據
                var data = {
                    start: start,
                    end: end
                };
                // 向Worker線程提交數據。
                cal.postMessage(JSON.stringify(data));
                cal.onmessage = function (event) {
                    document.getElementById("result").innerHTML += event.data + ",";
                }
            }
        }

    </script>
</head>
<body>
    起始值：<input type="text" id="start1" /><br />
    結束值：<input type="text" id="end1" /><br />
    <input type="button" value="點擊" onclick="car();" />
    <div id="result" style="width: 1500px; height: auto; border: 1px solid red; word-wrap: break-word;">
    </div>
</body>
</html>

worker.js瀏覽器

onmessage = function (event) {
    // 將數據提取出來。
    var data = JSON.parse(event.data);
    // 取出start參數
    var start = data.start;
    // 取出end參數
    var end = data.end;
    var result = "";
    search:
    for (var n = start; n <= end; n++) {
        for (var i = 2; i <= Math.sqrt(n); i++) {
            // 若是除以n的餘數爲0，開始判斷下一個數字。
            if (n % i == 0) {
                continue search;
            }
        }
        // 蒐集找到的質數
        result += (n + ",");
    }
    // 發送消息，將會觸發前臺JavaScript腳本中
    // Worker對象的onmessage方法
    postMessage(result);
}

例子3：多個線程嵌套多線程

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>多個線程嵌套 </title>
    <script>
        var car = function () {
            var start = document.getElementById("start1").value;
            var end = document.getElementById("end1").value;
            var count = document.getElementById("count1").value;

            var worker = new Worker('worker.js');
            var data = {
                start: start,
                end: end,
                count: count
            };
            worker.postMessage(JSON.stringify(data));
            worker.onmessage = function (event) {
                document.getElementById("result").innerHTML += event.data + ",";
            }

        }

    </script>
</head>
<body>
    起始值：<input type="text" id="start1" /><br />
    結束值：<input type="text" id="end1" /><br />
    個數：<input type="text" id="count1" /><br />
    <input type="button" value="點擊" onclick="car();" />
    <div id="result" style="width: 1500px; height: auto; border: 1px solid red; word-wrap: break-word;">
    </div>
</body>
</html>

worker.jsdom

onmessage = function (event) {
    // 將數據提取出來。
    var data = JSON.parse(event.data);
    // 取出start參數
    var start = data.start;
    // 取出end參數
    var end = data.end;
    // 取出count參數
    var count = data.count;
    var result = "";
    search:
    for (var n = start; n <= end; n++) {
        for (var i = 2; i <= Math.sqrt(n); i++) {
            // 若是除以n的餘數爲0，開始判斷下一個數字。
            if (n % i == 0) {
                continue search;
            }
        }
        // 蒐集找到的質數
        result += (n + ",");
    }
    // 再次啓動Worker線程
    var sub = new Worker("subworker.js");
    // 把須要處理的數據傳入啓動的Worker線程中
    sub.postMessage({ result: result, count: count });
    sub.onmessage = function (event) {
        // 發送消息，將會觸發前臺JavaScript腳本中
        // Worker對象的onmessage方法
        postMessage(event.data);
    }

}

subworker.jside

onmessage = function (event) {
    // 將數據提取出來。
    var data = event.data;
    // 提取全部質數
    var primeNums = data.result.split(",")
    var randResult = "";
    for (var i = 0; i < data.count; i++) {
        // 計算一個隨機索引值
        var randIndex = Math.floor(Math.random()
            * (primeNums.length - 1));
        // 隨機地"收集"一個質數
        randResult += (primeNums[randIndex] + ",");
    }
    // 發送消息，將會觸發啓動它的JavaScript腳本中
    // 對應Worker對象的onmessage方法
    postMessage(randResult);

}