HTML5——Web Worker使用方法

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文件：

 
 
 
 
 
  开始计时
  结束计时
 

 
 

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模仿售票系统

 
 
 
 
 
 
 
 

 

 

 

 

 
  开始抢票
 
 

worker.js文件：

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