欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Web Worker

程序员文章站 2022-07-03 16:06:26
...
什么是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事件

用于监听 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);
}

上一篇： Web Worker使用

下一篇： Web Worker

推荐阅读