HTML5web-Worker使用
HTML5 DAY06:
* Web Worker
* 基本内容
* 单线程与多线程
* Worker可以模拟多线程的效果
* 定义 - 运行在后台的javascript
* 注意 - 不能使用DOM
* 在Worker中只能使用javascript中的ECMA
* 目前主流浏览器都支持Worker,除IE8之前
* Worker提供API
* 检测当前浏览器是否支持Worker
if( typeof(Worker) !== "undefined" ){
说明当前浏览器支持Web Worker
}else{
说明当前浏览器不支持Web Worker
}
* 创建WebWorker对象
new Worker(worker文件)
* Worker对象
* onmessage事件
* postMessage()方法
* terminate()方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>计时器案例</title> 5 <meta charset="utf-8" /> 6 </head> 7 8 <body> 9 <input id="start" type="button" value="开始计时"> 10 <input id="stop" type="button" value="结束计时"> 11 <br> 12 <div id="showTime"></div> 13 <script> 14 /* 15 // 1. 获取两个button按钮元素 16 var start = document.getElementById("start"); 17 var stop = document.getElementById("stop"); 18 // 2. 分别绑定click事件 19 var time = 0; 20 start.onclick = addTime; 21 function addTime(){ 22 var showTime = document.getElementById("showTime"); 23 showTime.innerHTML = "<h3>"+time+"</h3>"; 24 25 time++; 26 27 t = setTimeout("addTime()",1000); 28 } 29 stop.onclick = function(){ 30 clearTimeout(t); 31 } 32 */ 33 /* 34 * setTimeout() - 定时器 35 * setInteval() - 周期性(- 10:25 练习) 36 */ 37 var start = document.getElementById("start"); 38 var stop = document.getElementById("stop"); 39 var time = 0; 40 start.onclick = function(){ 41 setInterval(function(){ 42 var showTime = document.getElementById("showTime"); 43 showTime.innerHTML = "<h3>"+time+"</h3>"; 44 45 time++; 46 47 },1000); 48 } 49 </script> 50 </body> 51 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>使用WebWorker实现计数器</title> 5 <meta charset="utf-8" /> 6 </head> 7 8 <body> 9 <input id="start" type="button" value="开始计时"> 10 <input id="stop" type="button" value="结束计时"> 11 <br> 12 <div id="showTime"></div> 13 <script> 14 var worker; 15 var start = document.getElementById("start"); 16 start.onclick = function(){ 17 // 使用WebWorker的逻辑实现 18 /* 19 * 1. 创建Web Worker对象 20 * new Worker(worker文件的路径) 21 * * 一个Worker对象 - 一个worker文件 22 */ 23 worker = new Worker("mytime.js"); 24 /* 25 * 2. 为Worker对象绑定onmessage事件 26 * * 该事件的处理函数 27 * * 通过event事件对象的data属性 28 * * 可以获取postMessage()方法传递的数据 29 */ 30 worker.onmessage = function(event){ 31 var time = event.data; 32 var div = document.getElementById("showTime"); 33 div.innerHTML = "<h3>"+time+"</h3>"; 34 } 35 } 36 var stop = document.getElementById("stop"); 37 stop.onclick = function(){ 38 worker.terminate(); 39 } 40 </script> 41 </body> 42 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Worker实现售票系统</title> 5 <meta charset="utf-8" /> 6 <style> 7 div { 8 width : 150px; 9 height : 150px; 10 border : solid 1px black; 11 float : left; 12 margin-right : 10px; 13 } 14 .hasTicket { 15 width : 150px; 16 height : 150px; 17 border : solid 1px black; 18 float : left; 19 margin-right : 10px; 20 background : green; 21 } 22 .noTicket { 23 width : 150px; 24 height : 150px; 25 border : solid 1px black; 26 float : left; 27 margin-right : 10px; 28 background : red; 29 } 30 </style> 31 </head> 32 33 <body align="center"> 34 <h1>售票系统</h1> 35 <div id="win0">售票窗口 1</div> 36 <div id="win1">售票窗口 2</div> 37 <div id="win2">售票窗口 3</div> 38 <div id="win3">售票窗口 4</div> 39 <div id="win4">售票窗口 5</div> 40 <br> 41 <input type="button" id="btn" value="抢票"> 42 <script> 43 var workers = []; 44 // 1. 获取页面button按钮 45 var btn = document.getElementById("btn"); 46 // 2. 为button按钮绑定click事件 47 btn.onclick = function(){ 48 /* 49 * 创建5个worker对象 50 * * 检测当前浏览器是否支持worker 51 * * 支持 - 创建worker对象 52 */ 53 if(typeof(Worker) !== "undefined"){ 54 for(var i=0;i<5;i++){ 55 var worker = new Worker("getticket.js"); 56 worker.onmessage = getmessage; 57 workers.push(worker); 58 } 59 } 60 } 61 function getmessage(event){ 62 // event事件对象 - target属性(绑定该事件的对象) 63 var w = event.target; 64 // 从数组中获取当前worker对象的角标 65 var index = workers.indexOf(w); 66 // 根据角标,获取对应的窗口 67 var win = document.getElementById("win"+index); 68 // event.data - 0或1 69 if(event.data == 1){//有票 70 win.className = "hasTicket"; 71 }else{//无票 72 win.className = "noTicket"; 73 } 74 } 75 </script> 76 </body> 77 </html>
