当工作人员忙时,无法向html webworker发送消息

时间:2018-02-13 17:38:22

标签: html5 multithreading web-worker

我是webworkers的新手,下面是我的示例代码

<body>
    <script type="text/javascript">
        var myWorker;
        $(document).ready(function () {

            myWorker = new Worker('worker.js');


            myWorker.onmessage = function (msg) {
                alert(msg.data);
            };


        });



        function SendMessage() {
            alert("send");
            myWorker.postMessage("test");
        }


        function SendMessage1() {
            alert("send1");
            myWorker.postMessage("1");

        }
    </script>


    <div id="target">df</div>
    <input type="button" id="test" name="sendMsg" onclick="SendMessage()" />
    <input type="button" id="test" name="sendMsg1" onclick="SendMessage1()" />
</body>

以下是worker.js

var i = 0;

self.onmessage = function (msg) {
    console.log(msg.data);


    if (msg.data == "1") {
        postMessage(i);
    }
    else {
        test();
    }


}

function test() {

    while (1) {
        //console.log(i);
        i++;
    }
}

一旦工作线程开始运行循环,工作线程就不会再收到任何消息。 当工人忙于当前的操作时,我们如何向工人发送消息?

1 个答案:

答案 0 :(得分:1)

工作人员的工作方式与主线程完全相同 - 如果您正在运行循环,则无法执行其他任务。

如果您希望能够在运行循环时处理消息,则需要暂时​​中断/暂停循环。

最简单的方法是不时等待超时:

// Promisification of setTimeout
function PromiseTimeout(delay) {
    return new Promise(function(resolve, reject) {
        setTimeout(resolve, delay);
    });
}


async function test() {
    while (1) {
        i++;
        // Every 10th iteration, this will execute
        if(i % 10 == 0) {
            await PromiseTimeout(0);
        }
    }
}

请注意,这需要ES6 async / await功能。它显然会使你的循环稍慢,因为它必须每隔10 i暂停一次。