-
Web Worker是 运行在后台的javascript,也就是说worker其实就是就一个js文件对象，worker可以让他所包含的js代码运行在后台
-
特点：
1）充分利用多核CPU的优势
2）对多线程支持非常好
3）不会影响页面的性能
4）不能访问web页面和DOM API
5）所有的主流浏览器均支持web worker,除了Internet Explorer -
Worker提供API
1）检测当前浏览器是否支持Worker
typeof(Worker) !== "undefined"2）创建Worker文件
创建普通的 JS 文件，都可以用于 Web Worker 文件3）创建Web Worker对象
var worker = new Worker("myTime.js"); 参数就是在第二步创建的js文件的路径4）worker事件
onmessage事件 用于监听 Web Worker 传递消息，通过回调函数接收传递的消息，通过回调函数的事件对象data 属性可以获取传递的消息 postMessage() w.postMessage( “worker success.” ); 通过postMessage() 方法传递消息内容 w.terminate(); 在HTML页面中，通过调用 Web Worker 对象的terminate( ) 方法终止 Web Worker。 onmessage事件，当执行postMessage事件时会触发 postMessage()方法 terminate()方法
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:150px;
height:150px;
border:1px solid black;
float: left;
margin: 10px;
}
.hasticket {
background: green;
}
.noTicket {
background: red;
}
</style>
</head>
<body align="center">
<h1>售票系统</h1>
<div id="win0">售票窗口1</div>
<div id="win1">售票窗口2</div>
<div id="win2">售票窗口3</div>
<div id="win3">售票窗口4</div>
<div id="win4">售票窗口5</div>
<button id="button">抢票</button>
</body>
<script type="text/javascript">
//创建一个空数组存放worker
var workers = [];
var btn = document.getElementById("button");
btn.onclick = function(){
workers.length = 0;
//判断当前浏览器是否支持worker
if(typeof(Worker) !== "undefined"){
//因为抢票互不影响，所以创建五个worker
for(var i=0;i<5;i++){
//创建worker并把worker放在数组中
var worker = new Worker("getTicket.js");
worker.onmessage = getMessage;
//将worker放到数组里
workers.push(worker);
}
}
function getMessage(event){
//获取到目标事件对象,通过下标会有延迟
var w = event.target;
var index = workers.indexOf(w);
var win = document.getElementById("win"+index);
if(event.data == 1){
win.className = "hasticket";
}else{
win.className = "noTicket";
}
}
}
</script>
</html>
getTicket.js部分的代码
var rand = Math.floor(Math.random()*101);
//模拟10%的概率抢到票
if(rand<10){
postMessage(1);
}else{
postMessage(0);
}
使用worker实现计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="start">开始计时</button>
<button id="stop">结束计时</button>
<br />
<div id="showTime"></div>
</body>
<script type="text/javascript">
var show = document.getElementById("showTime");
document.getElementById("start").onclick = function () {
//1.判断是否支持worker
if(typeof(Worker)!=="undefined"){
//2.创建js文件，将想要后台执行的js代码放在文件里
//3.创建worker对象,并开始执行worker中的代码
worker = new Worker("time.js");
worker.onmessage = function (event) {
//5.绑定接收worker传过来数据事件
show.innerHTML = event.data;
}
}else{
console.log("您使用的浏览器不支持worker");
}
}
document.getElementById("stop").onclick = function () {
//6.终止worker执行
worker.terminate();
}
</script>
</html>
time.js部分的代码
var time = 0;
function timer () {
time++;
//4.从worker中发送数据,worker对应js中的全局变量是worker对象
postMessage(time);
setTimeout(timer,1000);
}
timer();
网友评论