Web Worker-12.21
1.Web Worker是 运行在后台的javascript,也就是说worker其实就是就一个js文件对象，worker可以让他所包含的js代码运行在后台
2.特点：
-
充分利用多核CPU的优势
-
对多线程支持非常好
-
不会影响页面的性能
-
不能访问web页面和DOM API
-
所有的主流浏览器均支持web worker,除了Internet Explorer
3.Worker提供API -
检测当前浏览器是否支持Worker
typeof(Worker) !== "undefined“ -
创建Worker文件
创建普通的 JS 文件，都可以用于 Web Worker 文件 -
创建Web Worker对象
var worker = new Worker("myTime.js");
参数就是在第二步创建的js文件的路径 -
worker事件
-
onmessage事件
用于监听 Web Worker 传递消息，通过回调函数接收传递的消息，通过回调函数的事件对象data 属性可以获取传递的消息 -
postMessage()
w.postMessage( “worker success.” );
通过postMessage() 方法传递消息内容 -
w.terminate();
在HTML页面中，通过调用 Web Worker 对象的terminate( ) 方法终止 Web Worker。
4.创建WebWorker对象
Worker对象
onmessage事件，当执行postMessage事件时会触发
postMessage()方法
terminate()方法
代码示例： -
计时器
html
<!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("myTime.js");
//5.绑定接收worker传过来数据的事件
worker.onmessage = function(event){
show.innerHTML = event.data;
}
} else{
alert("您使用的浏览器不支持worker")
}
}
document.getElementById("stop").onclick= function(){
//6.终止worker执行
worker.terminate();
}
</script>
</html>
js
var time = 0;
function timer(){
time++;
//4.从worker中发送数据worker对应js中的全局变量是worker对象
postMessage(time);
setTimeout(timer,1000);
}
timer(); -
模拟售票系统
html
<!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">
var myWorkers = [];
var btn = document.getElementById("button");
btn.onclick = function(){
myWorkers.length = 0;
if(typeof(Worker) !== "undefined"){
for(var i=0;i<5;i++){
var worker = new Worker("getT.js");
worker.onmessage = getMessage;
myWorkers.push(worker);
}
}
function getMessage(event){
var w = event.target;
var index = myWorkers.indexOf(w);
var win = document.getElementById("win"+index);
if(event.data == 1){
win.className = "hasticket";
}else{
win.className = "noTicket";
}
}
}
</script>
</html>
js
//模拟百分之十的概率抢到票
var rand = Math.floor(Math.random()*101);
if (rand<50) {
//返回数据
postMessage(1);
console.log(1)
} else{
postMessage(0);
console.log(0)
}
