web worker postMessage 处理顺序答案

【问题标题】：web worker postMessage process orderweb worker postMessage 处理顺序
【发布时间】：2012-05-04 14:04:30
【问题描述】：

使用以下代码：

HTML 文件：

<!DOCTYPE html>

<html>

    <head>
        <title></title>
        <!--<script type="text/javascript" src="worker.js"></script>-->
        <script type="text/javascript" src="run.js"></script>
    </head>

    <body>
        <div id='log'></div>
    </body>

</html>

运行.js：

window.onload = function(){

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

    var log = document.getElementById('log');

    log.innerHTML += "<p>"+"test"+"</p>";

    worker.addEventListener('message', function(e) {
        //alert(e.data);
        log.innerHTML += '<p>' + e.data + '</p>';
    }, false);

    for(var i=1; i<21;i++){
        worker.postMessage(i);
    }
};

worker.js

self.addEventListener('message', function(e) {
  self.postMessage(e.data);
}, false);

输出是我期望的 1 到 20 的列表，但是如果我取消注释 run.js 消息侦听器中的警报调用，它会打印出 20 到 1。这是因为警报导致写入页面延迟并且消息处理备份在堆栈中，所以最后一个打开是第一个关闭？还是别的什么。

【问题讨论】：

有趣的事实：在 Firefox 中，我看到了 20、19、18，...，正如您所描述的那样。在 Chrome 中它是 1, 2, 3, ...

标签： javascript web-worker

【解决方案1】：

是的，这是因为“alert()”。它阻止了工作侦听器块内代码的进一步执行。换句话说，代码：

log.innerHTML += '<p>' + e.data + '</p>';

仅在按下警报框的模式窗口上的“确定”按钮后执行，按照您按下它们的顺序，“log.innerHTML”将按此顺序更改，因此您按降序按下它们订单，这就是你得到这个结果的原因。如果您不使用警报消息，一切都会顺利。

【讨论】：

这似乎不是正确的答案。为什么警报会反向显示数据（20 比 1）？而这只发生在 Firefox 中。当警报出现时，似乎像 Firefox 突然开始使用堆栈。不清楚这个答案是怎么回事。
@tapananand 这是正确的答案，正如我所写的那样，按警报的顺序按消息写入日志的顺序，在这种情况下，浏览器正在打开 20 个模式对话框（警报)，一个又一个，Firefox 显示它们的方式与 chrome 不同，不幸的是我们无法移动模态对话框，但如果我们可以实现任意顺序，例如：2、1、15、3、20、5 ...
据我所知，alert 会停止在同一线程中执行任何 JS 代码，因此一次只能存在一个警报。因此，不可能一次显示所有警报。除非警报不会阻止执行，我对此表示怀疑。
请告知自己有关警报的信息，并且 JavaScript 不是多线程的，在这种情况下，每个模式对话框都是异步打开的，在主循环的不同滴答声中，这就是为什么在这种情况下可能会出现多个警报
我的意思是线程 - 工作人员（由于工作人员，Javascript 不再是单线程的）。如果我调试代码，为什么下一个断点直到我按 OK 才命中？如果可以打开多个警报，则断点将独立于我单击确定

【解决方案2】：

我认为这是 Firefox 中的一个错误。在我尝试过的任何浏览器中，我都没有在 2020 年看到这种行为：它们的顺序都是从 1 到 20。

【讨论】：