html5新特性:Web Workers文件调用与对象创建

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。 关于web worker的应用大概分为三个部分:

  • 一. 创建 web worker 文件,worker文件是一个单独的js文件,写好逻辑后,通过postMessage()方法吧数据发送出去
  • 二. 调用页面创建worker对象,var w = new Worker("worker文件路径").然后通过实例对象调用onmessage事件进行监听,并获取worker文件里返回的数据
  • 三.终止web worker,当我们的web worker创建后会持续的监听它,需要中止的时候则使用实例上的方法w.terminate()

下面是个简单的 web worker文件 `

// 这是一个单独的js文件
var i=0;
function timedCount()
{
i=i+1;
postMessage(i); //把数据发送出去
setTimeout("timedCount()",500);
}
timedCount();
复制代码

` 在html页面调用worker文件,并创建worker对象

`

<div>计数器: <output id="result"></output></div>
<button onclick="startWorker()">开始Worker</button>
<button onclick="stopWorker()">停止Worker</button>

var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("worker.js");    // 创建worker实例对象
    }
  w.onmessage = function (event) {  // 通过onmessage事件接收数据
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();  // 停止worker任务
}
复制代码

` 注意:由于Worker属于外部文件,因此它不能获取javascript这些对象: window 对象,document 对象,parent 对象

THE END