HTML5 Web Workers使用

1.什么是Web Worker？

web worker 是运行在后台的 JavaScript，不会影响页面的性能。（类似于c#后台线程？）

2.如何使用

计数器例子：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <p>计数<output id="result"></output></p>
    <input type="button" value="开始" onclick="start()" />
    <input type="button" value="结束" onclick="stop()"/>
</body>
</html>
<script type="text/javascript">
    var w;
    function start()
    {
        if (typeof (Worker)!="undefined") //判断浏览器是否支持Worker功能
        {
            if (typeof (w) == "undefined")
            {
                w = new Worker("/Scripts/Worker.js");//加载一个自定义的js
            }
            w.onmessage = function (event)//用于返回消息
            {
                document.getElementById("result").innerHTML = event.data;//消息中的数据
            }
        } else
        {
            document.getElementById("result").innerHTML = "不支持Worker";
        }
    }

    function stop()
    {
        w.terminate();//此方法用于结束worker
        w = undefined;

    }
</script>
Worker.js（做一个线程自动加数）
var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);//用于worker 发消息
    setTimeout("timedCount()", 500);
}

timedCount();

如果worker为外部文件，像上面那样引用别的js，无法使用html中的window、document、parent对象

posted @ 2020-03-12 13:40  萌橙  阅读(206)  评论(0)  编辑  收藏  举报