HTML5_Web Workers

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给它运行。

在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。

1. 检测浏览器是否支持 Web Worker

   xxxxxxxxxx
    if(typeof(Worker)!=="undefined")
      {
      // 是的! Web worker 支持!
      
      }
    else
      {
      // //抱歉! Web Worker 不支持
      } 
   

2. 创建 Web Worker 对象，new Worker(脚本文件)

   xxxxxxxxxx
   w = new Worker("./demo_workers.js");
   

3. 定义worker具体任务

   xxxxxxxxxx
   //demo_workers.js
   var i=0
   setInterval(function(){
       i=i+1
       postMessage(i)
   },1000)
   

4. worker发送接收消息

   • 发送消息，postMessage(消息)

     xxxxxxxxxx
     //demo_workers.js
     var i = 0;
     setTimeout(function(){
         i=i+1
        postMessage(i)//使用postMessage(数据)发送
     },3000)
     

   • 添加onmessage事件监听器，监听接收消息，访问event.data获得消息

     xxxxxxxxxx
     w.onmessage = function (event) {
                       document.getElementById("result").innerHTML = event.data;
                     };
     

5. 关闭worker

   xxxxxxxxxx
   w.terminate(); 
   

Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

实时效果反馈

1.使用下列哪种方法可以发送消息：

A onMessage

B  postMessage

答案

1=>B