web worker 更耗费 CPU 资源的任务

最新推荐文章于 2023-05-30 20:00:00 发布

xiaozhen0610

最新推荐文章于 2023-05-30 20:00:00 发布

阅读量409

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hjbh0cbhkjaa.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

web worker的小例子，用来入门很合适，建议启动服务来开发。可以使用node的anywhere。

<!DOCTYPE html>
<html>

<body>

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

    <script>
        var w;

        function startWorker() {
            if (typeof (Worker) !== "undefined") {
                if (typeof (w) == "undefined") {
                    w = new Worker("/demo_worker.js");
                }
                w.onmessage = function (event) {
                    document.getElementById("result").innerHTML = event.data;
                };
            }
            else {
                document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
            }
        }

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

</body>

</html>

　　当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。

　　然后我们就可以从 web worker 发生和接收消息了，向 web worker 添加一个 "onmessage" 事件监听器。

/demo_worker.js

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息　　

xiaozhen0610

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web worker 更耗费 CPU 资源的任务

web worker的小例子，用来入门很合适，建议启动服务来开发。可以使用node的anywhere。<!DOCTYPE html><html><body> <p>计数: <output id="result"></output> </p> <button onclick="startWorker()">开始 Worker</button>
复制链接

扫一扫