HTML 5 基础教程

HTML是超文本标记语言，是一种专门用来制作网页的语言，而HTML5就是它的第五个版本，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成，该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能，同时也给我们开发者带来了更多的开发选择，学习它是每个前端开发者必修的课程。

W3CAPI

2020-06-15 06:59:35

文档目录

我的书签

请登录

HTML5 Web Workers 实例

一、使用 HTML5 Web Workers 实现异步计数功能

计数功能代码实现，我们可以使用 JavaScript 中的定时器来轻松实现，排除使用定时器的代码实现后，使用 JavaScript 循环来实现此功能，它在运行的时候我们是不能进行其他页面操作的，也就是计数功能一旦运行起来就会阻塞我们对网页页面的其他操作， HTML5 Web Workers 给我们提供了一种更好的异步任务处理的功能，利用它我们可以非常方便的来实现任何耗时的业务逻辑而又不会影响我们去执行其他操作。代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

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

</body>

<script type="text/javascript">

    var w;
    function startWorker()  {

        if( typeof(Worker) !== "undefined" )  {
            if( typeof(w) == "undefined" )  {
                w=new Worker("/static/example/html5/js/test_workers.js");
            }
            w.onmessage = function (event) {
                document.getElementById("result").innerHTML=event.data;
            };
        } else {
            document.getElementById("result").innerHTML="您的浏览器不支持 Web Workers...";
        }
    }

    function stopWorker() {
        w.terminate();
        delete w; //重置对象，还可以继续开始计数
        w = undefined;
    }
</script>

</html>

执行一下

作者文档