4

使用以下代码：

文件：

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

4

2 回答 2

6

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

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

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

于 2012-05-05T07:47:28.343 回答
0

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

于 2020-06-13T20:58:05.417 回答