gpt4 book ai didi

Javascript - GUI 编程

转载 作者:行者123 更新时间:2023-12-03 01:31:55 28 4
gpt4 key购买 nike

当下拉列表的选择发生变化时,我想:

1) 通过 div 在整个网站上显示一些 GUI 阻止覆盖

2)然后处理一些代码

3) 然后隐藏叠加层。

问题是,当我在事件监听器函数中编写此逻辑时,将执行 onChange 2),然后 GUI 执行 1) 和 3) 的更新,因为 GUI 仅在执行所有函数时才在 Javascript 中更新。这不是正确的顺序,也不是我想要的。

所以我以为我引入了一个Webworker,但事实证明Webworker什么也没做,顺序还是错误的。

demo_workers.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 中实现上面提到的目标呢?

最佳答案

您可以使用setTimeout让GUI有机会在某些代码开始之前进行更新;例如:

function afterGUIupdate() {
postMessage("do_stuff");
postMessage("hide_overlay_runtime");
}
postMessage("show_overlay_runtime");
setTimeout( afterGUIupdate, 1 );

从技术上讲,您的代码在调用 setTimeout 后完成,因此 GUI 可以进行更新。然后超时开始,执行您想要在之后发生的代码。

关于Javascript - GUI 编程,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51255904/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com