HTML5 多线程 Worker

webworker不能做的事:

不能访问document对象

不能访问window对象

不能访问parent对象

专用线程

主页面index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>test</title>
</head>

<body>
<script type="text/javascript">
onload = function(){
  var worker = new Worker('index.js');  
  worker.onmessage = function(event) {
    console.log("Result:" + event.data);
  };
  worker.onerror = function(error) {
    console.log("error:" + error.message);
    console.log("filename:" + error.filename);  
    console.log("lineno:" + error.lineno);    
  }

  setTimeout(function(){
  	worker.terminate();
  },2000)
}  

</script>
</body>
</html>

脚本文件index.js

function test(n){
	return n;
}

var n = 0;
setInterval(function(){
	n++;
	postMessage(test(n))
},1000);

共享线程

页面文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
</head>

<body>
<script type="text/javascript">

var worker = new SharedWorker('index.js')
worker.port.onmessage = function(event){
	console.log('data:', event.data)
}
worker.port.start()
window.worker = worker;

window.worker.port.postMessage('get')
window.worker.port.postMessage('send message')

</script>
</body>
</html>

脚本文件index.js

var data = ''
onconnect = function (e) {
  	var port = e.ports[0];

  	port.onmessage = function (e) {
    	if (e.data === 'get') {
      		port.postMessage(data);
    	} else {
      		data = e.data;
    	}
  	}
}

猜你喜欢

转载自blog.csdn.net/qq_17613195/article/details/84993584