HTML5 之工作线程

为了前台的用户体验,我们把很多复杂耗时的放在后台来计算,以保证页面的正常响应。

下面我们来介绍JavaScript的工作线程:

要用到javaScript工作线程,我们就要先来创建一个工作线程,JavaScript的工作线程怎么来创建呢?

很简单:像这样,var worker=new new Worker("后台.js");


下面,我们通过实现一个小计数器来说明吧:

<!DOCTYPE html>
<html>
<body>

<p>计数: <output id="result"></output></p>
<button οnclick="startWorker()">开始工作</button> 
<button οnclick="stopWorker()">停止工作</button>

<p><strong>注意:</strong> 你的浏览器不支持</p>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {//判断你的浏览其是否支持Worker
        if(typeof(w) == "undefined") {
           w = new Worker("workers.js");//创建线程
        }
      w.onmessage = function(event) {//这里就是接收后台计数返回过来的结果,event对象就是返回来的数据
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "你的浏览器不支持 Web Workers!";
    }
}


function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>


我们的后台worker.js代码如下

var i=0;
function timedCount()
{
    i=i+1;
   postMessage(i);//与onmessage对应,postMessage负责发送,onmessage负责接收
    setTimeout("timedCount()",500);
}
timedCount();


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值