HTML5 之工作线程

最新推荐文章于 2021-01-30 11:30:12 发布

北半球先生

最新推荐文章于 2021-01-30 11:30:12 发布

阅读量194

点赞数

分类专栏： Html5

本文链接：https://blog.csdn.net/sinat_22808389/article/details/52116879

版权

Html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

下面我们来介绍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();