两个javascript网络工作者连续打印输出-为什么不同时打印呢



我正在研究JavaScript中的网络工作者和多线程/并发。我正试图通过运行以下程序来向自己"证明"这一点

HTML

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Worker 2</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="main.js"></script>
</head>
<body>
</body>
</html>

main.js

var myFunction = function() {
    worker = new Worker('worker.js');
    worker.postMessage('cowboy');
    for (var i=0; i<500; i++) {
        var d = new Date();
        var h = d.getHours(); 
        var m = d.getMinutes();
        var s = d.getSeconds();
        var ms = d.getMilliseconds();
        console.log("main: " + h + ":" + m + ":" + s + ":" + ms);
    }
};
window.onload=myFunction;

worker.js

self.addEventListener('message', receiveMessage);
function receiveMessage(e) {
    for (var i=0; i<500; i++) {
        var d = new Date();
        var h = d.getHours(); // => 9
        var m = d.getMinutes(); // =>  30
        var s = d.getSeconds(); // => 51
        var ms = d.getMilliseconds();
        console.log("worker: " + h + " " + m + ":" + s + ":" + ms);
     }
}

发生的情况是,首先打印main.js中的所有console.log语句,然后打印worker.js(例如)中的所有onsole.log语句

控制台日志屏幕跳

我本以为打印输出会穿插在一起,例如

main: 21:50:10:707
worker: 21 50:10:708
main: 21:50:10:709
main: 21:50:10:710
worker: 21 50:10:711
worker: 21 50:10:712
worker: 21 50:10:713
main: 21 50:10:714

为什么没有发生这种情况?有没有任何方法可以证明这一点?

我不是专家,但这是我有根据的猜测:

postMessage是异步的。当您调用它时,它将要发送的消息排队,并且它将在当前"线程"(即"日志500控制台消息"位)完成时实际发送。此时,它可以自由地将消息发送给工作者,后者将能够记录自己的消息。

要测试这一点,请尝试将setTimeout(function() { ... }, 1);包装在循环中。。。理论上,您现在应该先看到工作线程的消息,然后再看到主线程的消息。

最新更新