Js-webWorker多线程

发表于

一、概念

工作线程（webWorker）允许JavaScript创建多个线程，但是子线程完全受主线程控制，且不得操作DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>

<head>
    <title>worker</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script>
    function init() {
        //创建一个Worker对象，并向它传递将在新线程中执行的脚本url
        var worker = new Worker('worker.js')
        //接收worker传递过来的数据
        worker.onmessage = function(event) {
            document.getElementById('result').innerHTML += event.data + "<br/>"
        }
    }
    </script>
</head>

<body onload="init()">
    <div id="result"></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// worker.js
var i = 0
function timedCount() {
    for (var j = 0, sum = 0; j < 100; j++) {
        for (var i = 0; i < 100000000; i++) {
            sum += i
        }
    }
    //将得到的sum发送回主线程
    postMessage(sum)
}
postMessage('Before computing, ' + new Date())
timedCount()
postMessage('After computing, ' + new Date())


二、api

1、postMessage(data) 子线程与主线程之间互相通信使用方法，传递的data为任意值。

2、terminate() 主线程中终止worker，此后无法再利用其进行消息传递。

3、onmessage 当有消息发送时，触发该事件。消息发送是双向的，消息内容可通过data来获取。

4、onerror 出错处理。且错误消息可以通过e.message来获取。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>

<head>
    <title>worker</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script>
    function init() {
        var worker = new Worker('worker.js')
        setInterval(function() {
            worker.postMessage({ name: 'monkey' })
        }, 100)
        worker.onmessage = function(event) {
            document.getElementById('result').innerHTML += event.data + "<br/>"
            worker.terminate()
        }
    }
    </script>
</head>

<body onload="init()">
    <div id="result"></div>
</body>

</html>
1
2
3
onmessage = function(event){
     postMessage(event.data.name)
}