当下拉列表的选择发生更改时,我希望:
1)通过DIV在整个网站上显示一些GUI阻塞覆盖
2)然后处理一些代码
3)然后隐藏覆盖。
问题是,当我在eventListener函数中编写此逻辑时,onchange 2)将执行,然后GUI执行1)和3)的更新,因为当所有函数执行时,GUI仅在javascript中更新。这不是正确的顺序,也不是我想要的。
所以我想我介绍一个网络工作者,但结果发现网络工作者什么也没做,顺序还是错的。
演示工.js:
postMessage("show_overlay_runtime");
postMessage("do_stuff");
postMessage("hide_overlay_runtime");
<!DOCTYPE html>
<html>
<head>
<style>
#overlay {
position: absolute;
top:200px;
left:0;
background-color: #000;
display:none;
width:100%;
height:200px;
}
</style>
</head>
<body>
<div id="overlay"></div>
<select id="my_dropdown">
<option>option1</option>
<option>option2</option>
</select>
<script>
let my_dropdown = document.getElementById('my_dropdown');
my_dropdown.addEventListener('change', function (e) {
dropdown_network_change_response();
}, false);
var workers = {};
function dropdown_network_change_response()
{
let worker_name = "worker1";
startWorker(worker_name, "demo_workers.js");
workers[worker_name].onmessage = function(event) {
if(event.data === "show_overlay_runtime") {
document.getElementById('overlay').style.display = "flex";
}
else if (event.data === "do_stuff") {
for(let i = 0; i < 1000000; i++) {
}
}
else if (event.data === "hide_overlay_runtime") {
document.getElementById('overlay').style.display = "none";
}
alert("test");
};
}
function startWorker(worker_name, file) {
if(typeof(Worker) !== "undefined") {
if(typeof(workers[worker_name]) == "undefined") {
workers[worker_name] = new Worker(file);
}
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker(worker_name) {
workers[worker_name].terminate();
workers[worker_name] = undefined;
}
</script>
</body>
</html>
那么,我如何才能实现我在javascript中提到的内容呢?