javascript - JS : Web Workers don't work

Question

我正在编写代码，但看起来不起作用，这里出了什么问题:

HTML:

<div>
    <button onclick="startWorkerp3()">Start Worker</button> 
    <button onclick="stopWorkerp3()">Stop Worker</button>
    <img id="p_3" src="PROBLEM3.png" style="display: none;">
    <output id="p3"></output>
</div>

JS:

<script>
        var w;

        function startWorkerp3() {
            if(typeof(Worker) !== "undefined") {
                if(typeof(w) == "undefined") {
                    w = new Worker("p3.js");
                }
                w.onmessage = function(event) {
                    document.getElementById("p3").innerHTML = event.data;
                };
            } else {
                document.getElementById("p3").innerHTML = "Sorry! No Web Worker support.";
            }
        }

        function stopWorkerp3() { 
            w.terminate();
            w = undefined;
        }

        function isPrime(value) {
            for(var i = 2; i < value; i++) {
                if(value % i === 0) {
                    return false;
                }
            }
            return value > 1;
        }
</script>

p3.js

function problem3(){
    var img = document.getElementById('p_3');
    img.style.display = img.style.display === 'block' ? 'none' : 'block';
    var number=1+e9;
    for(var i=2;i<number;i++){
        if(isPrime(i) && number%i==0)
            var maxPrime = i;
    }
    postMessage(maxPrime);
}

输出什么也没有:

我加载 p551 并且它工作正常，现在我尝试在 p3.js 上使用 WebWorker 来接受它，而不会出现浏览器错误，它会询问您是否要等待或终止它。但我认为代码是用正确的语法编写的，那么有什么问题吗？

Answer 1

由于 Web Worker 无法与 DOM 交互，因此这里的想法是处理 Web Worker(即 p3.js)中的所有计算，并且显示更新应该在另一侧处理，因为它们被锁定在 UI 线程中，无论我们做什么(无论如何)。

isPrime 可能会在 p3.js 中重新定位，因为 window 在工作线程的上下文中不可用。

您的代码中有一些内容被破坏。另外，您可能不想使用像 1e9 这样的高值进行测试，以使用非优化算法查找素数，这可能看起来是一个无关紧要的事情，但是当您想测试某个东西时有效，我建议不要对“siders”太过疯狂:D

首先，让我们摆脱工作端的 DOM API 调用。 (请注意，我将 1+e9 替换为 +1e9)

function problem3(){
    var number = +1e9;
    for(var i=2;i<number;i++){
        if(isPrime(i) && number%i==0)
            var maxPrime = i;
    }
    postMessage(maxPrime);
}

现在，由于 p3.js 是不同线程中的不同文件，因此您将无法访问主脚本的任何内存。这意味着 isPrime 在工作线程的上下文中不可用。希望这有一个直接的解决方案，因为您只需将 isPrime 函数移动到 p3.js。

您正在使用onclick="startWorkerp3()" 附加您的用户控件。通常建议用户使用 addEventListener，在这种特殊情况下，由于 onclick 的上下文处理，您的工作线程将永远不会启动

作为替代方案，例如它可能看起来像这样

<button id="start">Start Worker</button>

在主脚本文件中，我们需要重新定位从工作线程中删除的代码。据我了解，您希望在计算开始/结束时切换图像可见性。

document.querySelector('#start').addEventListener('click', function () {
    document.getElementById('p_3').style.display = 'none';
    startWorkerp3();
});

当worker完成计算时

w.onmessage = function(event) {
    document.getElementById("p3").innerHTML = event.data;
    document.getElementById("p_3").style.display = 'block';
};

最后，这就是它的样子(我总结一下，以便您可以轻松复制/粘贴并测试它)。您可能会发现我所做的一些小调整，其中一些可以忽略，无论如何解释每一件小事都太长了。

HTML

<div>
    <button id="start">Start Worker</button>
    <button id="stop">Stop Worker</button>
    <img id="p_3" src="PROBLEM3.png" alt="PROBLEM3.png" style="display: none;">
    <output id="p3"></output>
</div>

JS

    var w;

    document.querySelector('#start').addEventListener('click', function () {

        var img = document.getElementById('p_3');
        img.style.display = 'none';

        startWorkerp3();
    });

    document.querySelector('#stop').addEventListener('click', function () {
        if (w) {
            stopWorkerp3();
        }
    });


    function startWorkerp3() {
        if(typeof(Worker) !== "undefined") {
            if(typeof(w) == "undefined") {
                w = new Worker("p3.js");
            }
            w.onmessage = function(event) {
                document.getElementById("p3").innerHTML = event.data;
                document.getElementById('p_3').style.display = 'block';
            };
        } else {
            document.getElementById("p3").innerHTML = "Sorry! No Web Worker support.";
        }

        w.postMessage('start');
    }


    function stopWorkerp3() { 
        w.terminate();
        w = undefined;
    }

p3.js

onmessage = function (evt) {
    postMessage(problem3());
};


function problem3() {
    var number=100000;
    for(var i=2;i<number;i++){
        if(number%i==0 && isPrime(i))
            var maxPrime = i;
    }

    return maxPrime;
}


function isPrime(value) {
    for(var i = 2; i < value; i++) {
        if(value % i === 0) {
            return false;
        }
    }
    return value > 1;
}