HTML5——Web Worker使用方法

最新推荐文章于 2024-01-10 21:01:51 发布

叶落無痕

最新推荐文章于 2024-01-10 21:01:51 发布

阅读量857

点赞数 1

分类专栏： HTML5 学习笔记

本文链接：https://blog.csdn.net/Jeason_liu/article/details/49255931

版权

HTML5 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

学习笔记

8 篇文章 0 订阅

订阅专栏

Web Worker特点

1、利用多核CPU

2、对多线程支持较好

注意：

不能访问HTML页面，不能使用DOM

主流浏览器基本都支持，除了IE

如何使用Web Worker

1、创建Worker文件—就是js文件

2、判断当前浏览器是否支持Worker

if(typeof(Worker)!=="undefined"){

//说明当前浏览器支持Worker

}else{

//说明当前浏览器不支持Worker，可以给出说明提示

}

3、创建Worker对象—new Worker(worker文件路径)

小案例：使用worker实现计时器功能

HTML文件：

<!DOCTYPE html>
<html>
<head>
<title>Worker的使用入门</title>
<meta charset="utf-8"/>
</head>
<body>
<button id="start">开始计时</button>
<button id="stop">结束计时</button>
<div id="showtime"></div>
<script>
// 1. 判断当前浏览器是否支持Web Worker
if(typeof(Worker) !== "undefined"){
/*
* 2. 创建Worker对象
* new Worker(Worker文件的路径)
*/
var worker = new Worker("worker1.js");
/*
* 3. 通过Worker对象绑定事件
* onmessage事件 - 用于监听Worker文件
* * 该事件的处理函数接收参数
* * Worker文件通过postMessage()方法传递的消息,可以通过该事件的处理函数的参数进行接收
*/
worker.onmessage = function(message){
// 用于接收Worker文件传递的消息
console.log(message.data);
}
}else{
// 给出相关提示信息
}
/*
* 注意：chrome浏览器在新版本中不再允许读取本地文件
*/
</script>
</body>
</html>

worker文件：

var time = 0;
function showTime(){
time++;
// Worker对象的postMessage()方法,传递消息
postMessage(time);
}
showTime();

4、worker的方法与事件

方法

postMessage()—用于向Worker对象传递消息

terminate()—用于终止Worker的运行

事件：

onMessage—监听Worker文件

当postMessage()方法被触发时，onMessage就被调用

同时，创建Worker对象时，必须同时绑定onMessage事件

小案例：使用worker模仿售票系统

<!DOCTYPE html>
<html>
<head>
<title>使用Worker模拟售票系统</title>
<meta charset="utf-8"/>
<style>
div {
width : 150px;
height : 150px;
border : solid 1px black;
float : left;
margin-right : 10px;
}
</style>
</head>
<body>

<div id="window0"></div>
<div id="window1"></div>
<div id="window2"></div>
<div id="window3"></div>
<div id="window4"></div>

<button id="start">开始抢票</button>
<script>
var btn = document.getElementById("start");
var workers = [];//0-4
btn.onclick = function(){
// 开始抢票 - worker
if(typeof(Worker) !== "undefined"){
for(var i=0;i<5;i++){
// 创建worker对象
var worker = new Worker("worker.js");
// 绑定onmessage事件
worker.onmessage = myMessage;
// 将创建的worker对象放置在数组中
workers[workers.length] = worker;
}
}
}
/*
* onmessage事件的处理函数形参(event)
* * 通过形参获取postMessage()方法传递的消息
*/
function myMessage(e){
// 获取worker对象对应的角标
var index = workers.indexOf(e.target);
// 获取div对应worker对象 - div的i和worker的i
var div = document.getElementById("window"+index);
if(e.data == "1"){
// 有票
div.style.background = "green";
}else{
// 无票
div.style.background = "red";
}
}
/*
* 分析逻辑
* * 具有5个售票窗口
* * 同时开始抢票 - 逻辑相同
* * 结果
* * worker文件只需要创建一个
* * 完成抢票逻辑
* * 需要创建5个worker对象
*/
</script>
</body>
</html>

worker.js文件：

/*
* Worker文件 - 完成抢票逻辑
* * 10%概率可以抢到票
*/
// 生成一个 0-100 之间的一个整数
var rand = Math.floor(Math.random()*100);
// 0-99之间,判断概率是10%
if(rand < 50){
// 有票
postMessage(1);
}else{
// 无票
postMessage(0);
}