用以下代码。
HTML FILE:
<!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。这是因为警报造成了写入页面的延迟，而且消息处理是在堆栈中备份的，所以最后一个开启的就是第一个关闭的，还是其他原因。
是的，这是因为 "alert()"。它阻止了worker监听器块内代码的进一步执行。换句话说，这段代码是在 "OK "之后才被执行的。
log.innerHTML += '<p>' + e.data + '</p>';
只有在警报框的模态窗口上的 "OK "按钮被按下后才会被执行，你会按照顺序按下它们，按照这个顺序，"log.innerHTML "会被改变，所以你按照降序按下它们，这就是为什么你得到这个结果。如果你不使用警报信息，一切都会很顺利。
我认为这是Firefox中的一个错误。我在2020年在我试过的任何浏览器中都没有看到这种行为：它们的顺序都是从1到20。