什么是Web Worker？
-
Web Worker是 运行在后台的javascript,也就是说worker其实就是就一个js文件对象，worker可以让他所包含的js代码运行在后台
-
特点
- 充分利用多核CPU的优势
- 对多线程支持非常好
- 不会影响页面的性能
- 不能访问web页面(BOM)和DOM API
- 分为：BOM+DOM+ECMAScript
- 所有的主流浏览器均支持web worker,除了Internet Explorer
-
Worker提供API
- 检测当前浏览器是否支持Worker
typeof(Worker) !== "undefined" - 创建Worker文件
创建普通的js文件，都可以用于Web Worer文件 - 创建Web Worker对象
var worker = new Worker("myTime.js");
参数就是第二步创建的js文件的路径 - worker事件
- onmessage事件
- 检测当前浏览器是否支持Worker
用于监听 Web Worker 传递消息，通过回调函数接收传递的消息，通过回调函数的事件对象data 属性可以获取传递的消息
- postMessage()事件
w.postMessage( “worker success.” );通过postMessage()方法传递消息内容
- w.terminate()事件
在HTML页面中，通过调用 Web Worker 对象的terminate( ) 方法终止 Web Worker。
##### 实例一
- 使用worker实现定时器
- 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 showTime=document.getElementById("showTime")
document.getElementById("start").onclick=function () {
//1.判断是否支持worker
if(typeof(Worker)!="undefined"){
//2创建js文件，将想在后台执行的js代码放到文件里面
//3创建worker对象
worker = new Worker("myTime.js");
//绑定接受worker传过来的数据的事件
worker.onmessage=function (event) {
showTime.innerHTML=event.data;
}
}else{
console.log("您使用的浏览器不支持worker");
}
}
document.getElementById("stop").onclick=function () {
worker.terminate();
}
</script>
</html>
- Worker文件
var time=0;
function timer () {
time++;
//4.从worker中发送数据,work对应js文件中的全局变量，是work对象
postMessage(time);
setTimeout(timer,1000);
console.log(time);
}
timer();
##### 实例二
- worker模拟售票系统
- 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">
//创建一个空数组，存放worker
var myWorkers = [];
document.getElementById("button").onclick=function () {
myWorkers.length=0;
//1.判断当前浏览器是否支持worker
if(typeof(Worker)!=="undefined"){
//2.因为每个窗口互不影响，所以创建五个worker
for(var i=0;i<5;i++){
//3.创建worker并把worker放在数组中
var worker=new Worker("getTicket.js");
myWorkers.push(worker);
worker.onmessage=getmessage;
}
}
}
function getmessage(event){
//获取到事件目标对象
var w=event.target;
var index=myWorkers.indexOf(w);
if(event.data==1){
document.getElementById("win"+index).className="hasticket";
}else{
document.getElementById("win"+index).className="noTicket";
}
}
</script>
</html>
- Worker文件
var rand=Math.floor(Math.random()*100);
if(rand<10){
//返回数据
postMessage(1);
// console.log(1);
}else{
postMessage(0);
// console.log(0);
}
网友评论