一分钟搞懂WebWorker

最新推荐文章于 2025-06-06 17:08:29 发布

青青子衿~~

最新推荐文章于 2025-06-06 17:08:29 发布

阅读量3.6k

点赞数 12

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/weixin_45727272/article/details/124712771

版权

前端专栏收录该内容

54 篇文章

订阅专栏

Worker

我们知道JavaScript是一门单线程的语言，那么如果我们有一些计算特别耗时，想要放到另外一个线程去做，worker应运而生
worker就是一个独立于JavaScript线程之外的另外一个线程，可能理解为JavaScript实现多线程的方式

worker的使用

第一步判断浏览器是否支持worker，typeof (Worker) !== “undefined”
通过new Worker()构造方法创建一个worker线程，返回一个实例用于发送和接收数据
onmessage() 方法监听worker线程发送的数据
postMessage() 方法发送数据

worker的用法我们通过下面的代码来理解：

worker.html

<!DOCTYPE html>
<html>

<body>
    <p>点击Start Worker按钮启动web worker，可以看到web worker开始工作，且在web worker正常工作时，我们仍然可以在input输入框中输入信息，这表示页面并没有因为web
        worker的运行而被阻塞：</p>
    <p>计数: <output id="result"></output></p>
    <button onclick="startWorker()">Start Worker</button>
    <button onclick="stopWorker()">Stop Worker</button>
    <input type="text" value="" />
    <script>
        var w;
        function startWorker() {
            //判断浏览器是否支持worker
            if (typeof (Worker) !== "undefined") {
                if (typeof (w) === "undefined") {
                    w = new Worker("./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>

worker.js

function timedCount() {
    for (var i = 0; i < 10000000000; i++) {
        if (i % 100000 === 0) {
            postMessage(i);
        }
    }
}

timedCount();