如下代码所示
<body>
<button onclick="start()">开始</button>
<script>
function line() {
const start = Math.floor(Date.now() / 1000) * 1000;
const delay = 5000;
while (true) {
const end = Math.floor(Date.now() / 1000) * 1000;
if (end - start >= delay) {
return;
}
}
}
function start() {
const worker = new Worker("./worker.js");
worker.postMessage({ type: "init" });
// setInterval(() => {
// console.log("setInterval");
// line();
// }, 1000);
line();
}
</script>
</body>
// worker.js
function init() {
setInterval(() => {
console.log("worker---");
}, 1000);
}
self.addEventListener("message", () => {
console.log("self");
init();
});点击开始，5s后worker.js 才会收到消息，打印出self，然后1s打印1次worker---
但是，如果将line()放在setInterval中worker.js会1s打印1次worker---
不是很理解line()是后调用的，但是postMessage5s后才被触发，还是说是worker中的问题
说明浏览器是等当前事件循环完成再去处理跨线程通讯的，而费时的同步操作 line 会显著延长当前事件循环的时间长度，实现就是这么个实现，也不能说错。
硬要算是个问题的话，那就是浏览器的问题。