一分钟搞懂WebWorker_html-js-css

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 Workerbutton>
    <button onclick="stopWorker()">Stop Workerbutton>
    <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();

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/940931.html

一分钟搞懂WebWorker

发表评论

评论列表（0条）