码迷,mamicode.com
首页 > Web开发 > 详细

web worker 更耗费 CPU 资源的任务

时间:2018-05-10 19:30:13      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:set   cti   html   rip   tput   script   传递   get   element   

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 页面传回一段消息  

web worker 更耗费 CPU 资源的任务

标签:set   cti   html   rip   tput   script   传递   get   element   

原文地址:https://www.cnblogs.com/yiyi17/p/9021048.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!