1、介绍
2、worker使用
1、查看文档
2、线程js文件
self.addEventListener('message', function (event) {
setTimeout(() => {
self.postMessage("1111-------1111")
}, 2000);
});
3、html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Shared Workers basic example</title>
</head>
<body>
<div class="controls" tabindex="0">
<button onclick="aa()">按钮</button>
</div>
<script>
function aa(){
var worker = new Worker('work.js', { name : 'myWorker' })
worker.postMessage({name:'12321'})
worker.addEventListener('message', function (event) {
console.log(event.data,event);
});
}
</script>
</body>
</html>4、注意事项
3、sharedWorker
1、前言
2、线程js文件
var a = 1; onconnect = function (e) { var port = e.ports[0]; port.onmessage = function () { port.postMessage(a++) } }
3、html文件（index.html）
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>worker demo</title></head>
<body>
<div> <h1>使用shared worker:</h1> </div>
<button style="padding: 10px; margin: 10px 0;">点击一下</button>
<div><span>点了 <span class="time">-</span> 下</span></div>
<iframe src="index2.html" width='500px' height="400px"></iframe>
<script>
let button = document.querySelector('button');
let worker = new SharedWorker('worker.js');
worker.port.start();
let time;
button.addEventListener('click', function () {
worker.port.postMessage('start');
});
let timeDom = document.querySelector('.time');
worker.port.onmessage = function (val) {
timeDom.innerHTML = val.data
}
</script>
</body>
</html>4、html文件（index2.html）
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>worker demo</title></head>
<body>
<div><h1>使用shared worker:</h1></div>
<button style="padding: 10px; margin: 10px 0;">点击一下</button>
<div><span>点了 <span class="time">-</span> 下</span></div>
<script>
let button = document.querySelector('button');
let worker = new SharedWorker('worker.js');
worker.port.start();
let time;
button.addEventListener('click', function () {
worker.port.postMessage('start');
});
let timeDom = document.querySelector('.time');
worker.port.onmessage = function (val) {
timeDom.innerHTML = val.data
}
</script>
</body>
</html>