Question

使用以下代码：

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>

run.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。这是因为警报导致写入页面的延迟，并且消息处理在堆栈中备份，所以最后一个是第一个关闭？或者是别的什么。

Answer 1

是的，这是因为“alert（）”。它阻止在工作者监听器块内进一步执行代码。换句话说，代码：

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

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

Answer 2

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

web worker postMessage流程订单

2 个答案: